How to create an animated profile card with Tailwind CSS

Let’s create an animated profile card with Tailwind CSS. This tutorial will show you how to create a profile card that animates when you hover over it. The card will have a hover effect that reveals a list of links.

What are profile cards?

Profile cards are a great way to showcase your personal brand and give your visitors a glimpse into your life. They are also a great way to introduce yourself to potential clients or customers. A profile card can be as simple as a photo and a name, or it can be more elaborate with additional information, like a bio, a list of links, or even a video!

Use cases

• Introduce yourself to potential clients or customers
• Showcase your personal brand
• Provide a quick overview of your work or services
• Highlight your achievements or accomplishments

Let’s get started!

Thr wrapper

• relative is used to position the card relative to the parent element.
• overflow-hidden is used to hide any overflowing content.
• flex is used to create a flex container.
• flex-col is used to create a column layout.
• items-center is used to center the items vertically.
• justify-center is used to center the items horizontally.

<div class="relative flex flex-col items-center justify-center overflow-hidden">
  <!--- Content goes here --->
</div>

The card itself

• relative is used to position the card relative to the parent element.
• overflow-hidden is used to hide any overflowing content.
• w-full is used to make the card take up the full width of its parent.
• h-full is used to make the card take up the full height of its parent.
• py-32 is used to add padding to the top and bottom of the card.
• cursor-pointer is used to make the card clickable.

<div class="relative w-full h-full py-32 overflow-hidden cursor-pointer ">
  <!--- Content goes here --->
</div>

The card background

• z-10 is used to make the card background appear on top of other elements.
• absolute is used to make the card background positioned absolutely.
• w-full is used to make the card background take up the full width of its parent
• h-full is used to make the card background take up the full height of its parent.
• peer is used to designate this element as a reference point for conditional styling of its siblings or children using the peer-* variants. This allows you to change the styles of other elements based on the state of this peer element (e.g., hover, focus, checked).

<div class="absolute z-10 w-full h-full peer"></div>

The card with the links

• absolute is used to make the card with the links positioned absolutely.
• peer-hover:right-0 is used to make the card with the links appear on the right side of the card when the user hovers over it.
• peer-hover:rounded-b-none is used to remove the rounded corners from the card with the links when the user hovers over it.
• peer-hover:bottom-0 is used to make the card with the links appear at the bottom of the card when the user hovers over it.
• peer-hover:items-center is used to center the items vertically within the card with the links when the user hovers over it.
• peer-hover:justify-center is used to center the items horizontally within the card with the links when the user hovers over it.
• peer-hover:w-full is used to make the card with the links take up the full width of the card when the user hovers over it.
• peer-hover:h-full is used to make the card with the links take up the full height of the card when the user hovers over it.
• -bottom-44 is used to position the card with the links 44 pixels from the bottom of the card.
• -right-16 is used to position the card with the links 16 pixels from the right of the card.
• w-36 is used to set the width of the card with the links to 36 pixels.
• h-44 is used to set the height of the card with the links to 44 pixels.

<div
  class="absolute  peer-hover:right-0 peer-hover:rounded-b-none peer-hover:bottom-0 peer-hover:items-center peer-hover:justify-center peer-hover:w-full peer-hover:h-full -bottom-44 -right-16 w-36 h-44"
>
  <!--- Content goes here --->
</div>

Tthe full markdown

<div
  class="relative flex flex-col items-center justify-center overflow-hidden "
>
  <div class="relative w-full h-full py-32 overflow-hidden cursor-pointer ">
    <div class="absolute z-10 w-full h-full peer"></div>
    <div
      class="absolute flex items-end justify-end text-xl text-center text-white peer-hover:right-0 peer-hover:rounded-b-none peer-hover:bottom-0 peer-hover:items-center peer-hover:justify-center peer-hover:w-full peer-hover:h-full -bottom-44 -right-16 w-36 h-44 bg-black/60 backdrop-blur-lg transition-all duration-500"
    >
      <ul>
        <li>
          <!--- SVG Icions foes here --->
          <a>Your link</a>
        </li>
        <!--- Add more links here --->
      </ul>
    </div>
    <div>
      <img src="#_" alt="" />
      <div>Hi! I'm Michael</div>
    </div>
  </div>
</div>

Conclusion

This is just a small example of a profile card with Tailwind CSS. You can customize it to fit your needs and add more features like other hover effects, other links, or even a video.

Hope you enjoyed this tutorial and have a god day!