← Back to all tutorials

How to create an animated profile card with Tailwind CSS

#_
Published 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!

Reviews and opinions

  • "I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."

    Stuart

    Stuart

    Creator of saasydb.com

  • "Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"

    Alex Hughes

    Alex Hughes

    letsloopin.com

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!

Lexington

Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.