پیشنمایش زنده
کد HTML
<div
class="group flex flex-col justify-start items-start gap-2 w-96 h-56 duration-500 relative rounded-lg p-4 bg-purple-500 hover:-translate-y-2 hover:shadow-xl shadow-purple-400"
>
<div
class="absolute duration-700 shadow-md group-hover:-translate-y-4 group-hover:-translate-x-4 -bottom-10 -right-10 w-1/2 h-1/2 rounded-lg bg-purple-400"
alt="image here"
></div>
<div class="">
<h2 class="text-2xl font-bold mb-2 text-white">Elegant Card</h2>
<p class="text-gray-200 line-clamp-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis
magna quis lectus fermentum, quis scelerisque orci pellentesque. Duis id
porta justo. Sed ac enim id justo tincidunt hendrerit id ac lectus.
Pellentesque maximus posuere tortor vitae consequat.
</p>
</div>
<button
class="hover:bg-purple-400 bg-purple-600 text-white mt-6 rounded p-2 px-6"
>
Explore
</button>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-bottom-10 {
bottom: -2.5rem;
}
.-right-10 {
right: -2.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.flex {
display: flex;
}
.h-1\/2 {
height: 50%;
}
.h-56 {
height: 14rem;
}
.w-1\/2 {
width: 50%;
}
.w-96 {
width: 24rem;
}
.flex-col {
flex-direction: column;
}
.items-start {
align-items: flex-start;
}
.justify-start {
justify-content: flex-start;
}
.gap-2 {
gap: 0.5rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.bg-purple-400 {
--tw-bg-opacity: 1;
background-color: rgb(192 132 252 / var(--tw-bg-opacity));
}
.bg-purple-500 {
--tw-bg-opacity: 1;
background-color: rgb(168 85 247 / var(--tw-bg-opacity));
}
.bg-purple-600 {
--tw-bg-opacity: 1;
background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold {
font-weight: 700;
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-purple-400 {
--tw-shadow-color: #c084fc;
--tw-shadow: var(--tw-shadow-colored);
}
.duration-500 {
transition-duration: 500ms;
}
.duration-700 {
transition-duration: 700ms;
}
.hover\:-translate-y-2:hover {
--tw-translate-y: -0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:bg-purple-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(192 132 252 / var(--tw-bg-opacity));
}
.hover\:shadow-xl:hover {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group:hover .group-hover\:-translate-x-4 {
--tw-translate-x: -1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:-translate-y-4 {
--tw-translate-y: -1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}