پیشنمایش زنده
کد HTML
<div class="relative group duration-500 cursor-pointer group overflow-hidden relative text-gray-50 h-72 w-56 rounded-2xl hover:duration-700 duration-700">
<div class="w-56 h-72 bg-lime-400 text-gray-800">
<div class="flex flex-row justify-between">
<svg class="fill-current stroke-current w-8 h-8 p-2 hover:bg-lime-200 rounded-full m-1" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
<path class="" d="M15.8,32.9V15.8m0,0H32.9m-17.1,0L37.2,37.2m47-4.3V15.8m0,0H67.1m17.1,0L62.8,37.2m-47,29.9V84.2m0,0H32.9m-17.1,0L37.2,62.8m47,21.4L62.8,62.8M84.2,84.2V67.1m0,17.1H67.1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
</path>
</svg>
<svg class="fill-current stroke-current w-8 h-8 p-2 m-1 hover:bg-lime-200 rounded-full" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
<path class="svg-stroke-primary" d="M50,17.4h0M50,50h0m0,32.6h0M50,22a4.7,4.7,0,1,1,4.7-4.6A4.7,4.7,0,0,1,50,22Zm0,32.7A4.7,4.7,0,1,1,54.7,50,4.7,4.7,0,0,1,50,54.7Zm0,32.6a4.7,4.7,0,1,1,4.7-4.7A4.7,4.7,0,0,1,50,87.3Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
</path>
</svg>
</div>
</div>
<div class="absolute bg-gray-50 -bottom-24 w-56 p-3 flex flex-col gap-1 group-hover:-bottom-0 group-hover:duration-600 duration-500">
<span class="text-lime-400 font-bold text-xs">TAILWIND</span>
<span class="text-gray-800 font-bold text-3xl">Cheat Sheet</span>
<p class="text-neutral-800">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
کد CSS
.absolute {
position: absolute
}
.relative {
position: relative
}
.-bottom-24 {
bottom: -6rem
}
.m-1 {
margin: 0.25rem
}
.flex {
display: flex
}
.h-72 {
height: 18rem
}
.h-8 {
height: 2rem
}
.w-56 {
width: 14rem
}
.w-8 {
width: 2rem
}
.cursor-pointer {
cursor: pointer
}
.flex-row {
flex-direction: row
}
.flex-col {
flex-direction: column
}
.justify-between {
justify-content: space-between
}
.gap-1 {
gap: 0.25rem
}
.overflow-hidden {
overflow: hidden
}
.rounded-2xl {
border-radius: 1rem
}
.rounded-full {
border-radius: 9999px
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}
.bg-lime-400 {
--tw-bg-opacity: 1;
background-color: rgb(163 230 53 / var(--tw-bg-opacity))
}
.fill-current {
fill: currentColor
}
.stroke-current {
stroke: currentColor
}
.p-2 {
padding: 0.5rem
}
.p-3 {
padding: 0.75rem
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem
}
.font-bold {
font-weight: 700
}
.text-gray-50 {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity))
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity))
}
.text-lime-400 {
--tw-text-opacity: 1;
color: rgb(163 230 53 / var(--tw-text-opacity))
}
.text-neutral-800 {
--tw-text-opacity: 1;
color: rgb(38 38 38 / var(--tw-text-opacity))
}
.duration-500 {
transition-duration: 500ms
}
.duration-700 {
transition-duration: 700ms
}
.hover\:bg-lime-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(217 249 157 / var(--tw-bg-opacity))
}
.hover\:duration-700:hover {
transition-duration: 700ms
}
.group:hover .group-hover\:-bottom-0 {
bottom: -0px
}