Profile Card Using HTML & Tailwind (Tailwind Cards Codepen available)

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

HTML & Tailwind Code For Tailwind Profile Card

<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 the tailwind CSS.

Now, we’ll construct a container for our profile card using the div tag with tailwind classes. Inside of that container, we’ll use the div tag with classes to add a background using tailwind CSS, and 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 the 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.

5+ HTML CSS Projects With Source Code

Output

 

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.

Final Output Of Tailwind Profile Card