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
Get lifetime access to every theme available today for $199 $139 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!