Tailwind Profile Card (Code + Codepen)

Welcome to the Codewithrandom blog. In this blog, We Create a Tailwind Profile Card and Its Responsive Profile Card. We use HTML and Tailwind Css for Tailwind Profile Card.

it enables customers and users to clearly grasp the information background of someone we want to introduce on the website, a tailwind profile card is comparable to a business card. Therefore, as technology advances, the character card's aesthetics play an increasingly significant role in attracting users' attention and giving the website a polished appearance.

I hope you enjoy our blog so let's start with a basic HTML Structure for the Tailwind Profile Card.

Tailwind Profile Card Code

<div class="min-h-screen grid place-items-center bg-indigo-400 font-mono">
  <div class="bg-white h-80 w-64 rounded-md">
    <div class="flex justify-center items-center leading-none">
      <img
        src="https://images.unsplash.com/photo-1585554414787-09b821c321c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
        alt="pic"
        class="h-40 w-56 rounded-md shadow-2xl mt-6 transform -translate-y-10 hover:-translate-y-4 transition duration-700"
      />
    </div>
    <div class="p-3">
      <p class="block mb-1 font-extralight">Modelling</p>
      <p class="text-xs tracking-tighter text-gray-600">
        When it is your time, it’s your time. There is no point in worrying
        about what you can’t control.
      </p>
    </div>
    <div class="flex justify-between items-center p-2">
      <img
        src="https://i.pravatar.cc/150?img=58"
        alt=""
        class="rounded-full h-7"
      />
      <div class="flex">
        <i class="material-icons" style="color: #522cad">favorite_border</i>
        <span class="text-sm ml-1">100</span>
        <i class="material-icons ml-1" style="color: #522cad">message</i>
        <span class="text-sm ml-1">60</span>
      </div>
    </div>
  </div>
</div>

Before we create the structure, we must first include a few important connections inside the HTML. In the head section, a link to CSS will be provided. To make this website more flexible and stylish, we used tailwind CSS.

Now, we'll construct a container for our profile card using the div tag with tailwind classes. Inside that container, we'll use the div tag with classes to add a background using Tailwind CSS; inside of that container, we'll use the image tag to add an image. Along with the i> tag, we will add the i> to create the structure for our profile card. With that, we will create a section for the logo of our picture.

There is all HTML and Tailwind code for the Tailwind Profile Card. Now, you can see output without Css, then we write Css Code for the Tailwind Profile Card Icon.

CSS Code For Tailwind Profile Card

this is the CDN link of tailwind css so don't forget to add this, if you did not add this CDN link you get a blank html preview.this is a link to the icon of the Tailwind Card.

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');

We will first import some new Google fonts and new font icons inside the CSS area.

We have completed our Tailwind Profile Card. Here is our updated output with Html, Tailwind Css, and Css. Hope you like the Tailwind Profile Card Codepen. you can see output project screenshots and codepen. See our other blogs and gain knowledge in front-end development.

Thank you!

This post teaches us to create a Tailwind Profile Card. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by - Code With Random/Anki

code by - Vishnu Darshan Sanku