人物推薦卡片
#card-009-person-recommend
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<style type="text/tailwindcss">
.card {
@apply max-w-md w-full relative px-12 pt-5 pb-20 bg-white shadow-lg transition-all duration-500 cursor-pointer;
}
.card:hover {
@apply -translate-y-5 bg-amber-500 shadow-none;
}
.spy-five {
@apply space-y-5;
}
.svg-content {
@apply flex justify-center;
}
.svg {
@apply w-24 fill-slate-200/50;
}
.recommend {
@apply text-sm text-justify text-black transition-all duration-500;
}
.card:hover .spy-five .recommend {
@apply text-white;
}
.person-content {
@apply absolute -bottom-[92px] left-1/2 -translate-x-1/2 space-y-2;
}
.img {
@apply aspect-square object-cover rounded-full w-20 h-20 grayscale group-hover:grayscale-0 transition-all duration-500;
}
.card:hover .person-content .img {
@apply grayscale-0;
}
.name {
@apply text-center text-black text-sm;
}
.job {
@apply text-center text-black text-xs;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<div class="group card">
<div class="spy-five">
<div class="svg-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="svg">
<path
d="M96 280C96 213.7 149.7 160 216 160L224 160C241.7 160 256 174.3 256 192C256 209.7 241.7 224 224 224L216 224C185.1 224 160 249.1 160 280L160 288L224 288C259.3 288 288 316.7 288 352L288 416C288 451.3 259.3 480 224 480L160 480C124.7 480 96 451.3 96 416L96 280zM352 280C352 213.7 405.7 160 472 160L480 160C497.7 160 512 174.3 512 192C512 209.7 497.7 224 480 224L472 224C441.1 224 416 249.1 416 280L416 288L480 288C515.3 288 544 316.7 544 352L544 416C544 451.3 515.3 480 480 480L416 480C380.7 480 352 451.3 352 416L352 280z" />
</svg>
</div>
<p class="recommend">At first,
I wasn’t a fan of popups and didn’t believe they
could work.
But after using OptinMonster, our email signups more than doubled.
The results speak for themselves—it's simple, effective, and absolutely worth the investment.</p>
</div>
<div class="person-content">
<img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="img" alt="">
<p class="name">Eric Wong</p>
<p class="job">UI/UX Designer</p>
</div>
</div>
</body>
</html>