پیشنمایش زنده
کد HTML
<div
class="flex flex-col items-center bg-white w-72 h-auto pt-5 pb-7 border border-gray-200 rounded-lg space-y-8"
>
<section class="flex flex-col text-center space-y-1">
<h2 class="text-2xl font-bold tracking-tight text-gray-900">
Title of your Card
</h2>
<p class="text-slate-500 text-sm">Subtitle on your Card</p>
</section>
<section class="space-y-2">
<div class="flex gap-2">
<svg
fill="currentColor"
viewBox="0 0 20 20"
class="w-5 h-5 text-blue-500"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
fill-rule="evenodd"
></path>
</svg>
<span class="text-slate-500 text-sm">Name Product</span>
</div>
<div class="flex gap-2">
<svg
fill="currentColor"
viewBox="0 0 20 20"
class="w-5 h-5 text-blue-500"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
fill-rule="evenodd"
></path>
</svg>
<span class="text-slate-500 text-sm">Name Product</span>
</div>
<div class="flex gap-2">
<svg
fill="currentColor"
viewBox="0 0 20 20"
class="w-5 h-5 text-blue-500"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
fill-rule="evenodd"
></path>
</svg>
<span class="text-slate-500 text-sm">Name Product</span>
</div>
</section>
<section class="flex w-full flex-col space-y-2 px-9">
<button
class="py-3 font-medium tracking-wide capitalize transition-colors duration-300 transform bg-gray-100 rounded-md hover:bg-gray-200 text-sm text-gray-600"
>
First Buttom
</button>
<button
class="py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600"
>
Accept
</button>
</section>
</div>
کد CSS
.flex {
display: flex;
}
.h-5 {
height: 1.25rem;
}
.h-auto {
height: auto;
}
.w-5 {
width: 1.25rem;
}
.w-72 {
width: 18rem;
}
.w-full {
width: 100%;
}
.transform {
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));
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.gap-2 {
gap: 0.5rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.border {
border-width: 1px;
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.px-9 {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pb-7 {
padding-bottom: 1.75rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.capitalize {
text-transform: capitalize;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.transition-colors {
transition-property: color, background-color, border-color, fill, stroke,
-webkit-text-decoration-color;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300 {
transition-duration: 300ms;
}
.hover\:bg-blue-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}