Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.

← Back to all tutorials

How to create an animated profile card with Tailwind CSS

#_
Published and written on Jul 08 2024 by Michael Andreuzza

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 overflow-hidden flex flex-col items-center justify-center">
    <!--- 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 overflow-hidden  w-full h-full py-32 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="z-10 absolute w-full h-full peer"></div>
  • 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 overflow-hidden flex flex-col items-center justify-center ">
  <div
    class="relative overflow-hidden  w-full h-full py-32 cursor-pointer">
    <div class="z-10 absolute w-full h-full peer"></div>
    <div
      class="absolute flex text-xl text-center items-end justify-end 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 text-white 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!

/Michael Andreuzza

Did you like this tutorial? Please share it with your friends!

Get lifetime access to every theme available today for $199 and own them forever. Plus, new themes, lifetime updates, use on unlimited projects and enjoy lifetime support.

— No subscription required!