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.
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!
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>
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>
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 parenth-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>
<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>
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
"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
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
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!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.