Person Card Follow
#cards-008-person-card-follow
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<style type="text/tailwindcss">
.card {
@apply max-w-80 w-full relative rounded-2xl overflow-hidden;
}
.img {
@apply aspect-[9/16] bg-center relative bg-[url('https://plus.unsplash.com/premium_photo-1664541336692-e931d407ba88?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] before:w-full before:h-full before:absolute before:backdrop-blur-lg before:[mask:linear-gradient(180deg,transparent_50%,#000_100%)];
}
.content {
@apply flex flex-col justify-between absolute top-0 left-0 w-full h-full py-10 px-5;
}
.name {
@apply text-center text-3xl text-white;
}
.info-content {
@apply flex justify-between space-x-5;
}
.person-info {
@apply flex space-x-2;
}
.small-img {
@apply rounded-full w-10 h-10;
}
.account {
@apply text-white text-sm font-bold;
}
.time {
@apply text-xs text-white/80;
}
.follow-content {
@apply p-1 flex items-center justify-center space-x-1 bg-white rounded-md flex-1 cursor-pointer border border-transparent transition-all duration-300 text-black font-bold;
}
.follow-content:hover {
@apply border-white bg-transparent text-white;
}
.svg {
@apply fill-black transition-all duration-300;
}
.follow-content:hover .svg {
@apply fill-white;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<div class="card">
<div class="img"></div>
<div class="content">
<p class="name">Eric</p>
<div class="info-content">
<div class="person-info">
<img src="https://plus.unsplash.com/premium_photo-1664541336692-e931d407ba88?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="small-img" alt="">
<div>
<p class="account">@eric250906</p>
<p class="time">23m ago</p>
</div>
</div>
<div class="follow-content group">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" class="svg">
<path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" />
</svg>
<p>Follow</p>
</div>
</div>
</div>
</div>
</body>
</html>