پیشنمایش زنده
کد HTML
<div class="relative flex w-80 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
<div class="relative mx-4 -mt-6 h-40 overflow-hidden rounded-xl bg-blue-gray-500 bg-clip-border text-white shadow-lg shadow-blue-gray-500/40 bg-gradient-to-r from-blue-500 to-blue-600">
</div>
<div class="p-6">
<h5 class="mb-2 block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
Tailwind card
</h5>
<p class="block font-sans text-base font-light leading-relaxed text-inherit antialiased">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis ligula.
</p>
</div>
<div class="p-6 pt-0">
<button data-ripple-light="true" type="button" class="select-none rounded-lg bg-blue-500 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-blue-500/20 transition-all hover:shadow-lg hover:shadow-blue-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
Read More
</button>
</div>
</div>
کد CSS
.relative {
position: relative
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem
}
.-mt-6 {
margin-top: -1.5rem
}
.mb-2 {
margin-bottom: 0.5rem
}
.block {
display: block
}
.flex {
display: flex
}
.h-40 {
height: 10rem
}
.w-80 {
width: 20rem
}
.select-none {
-webkit-user-select: none;
user-select: none
}
.flex-col {
flex-direction: column
}
.overflow-hidden {
overflow: hidden
}
.rounded-lg {
border-radius: 0.5rem
}
.rounded-xl {
border-radius: 0.75rem
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops))
}
.from-blue-500 {
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.to-blue-600 {
--tw-gradient-to: #2563eb var(--tw-gradient-to-position)
}
.bg-clip-border {
background-clip: border-box
}
.p-6 {
padding: 1.5rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem
}
.pt-0 {
padding-top: 0px
}
.text-center {
text-align: center
}
.align-middle {
vertical-align: middle
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem
}
.font-bold {
font-weight: 700
}
.font-light {
font-weight: 300
}
.font-semibold {
font-weight: 600
}
.uppercase {
text-transform: uppercase
}
.leading-relaxed {
line-height: 1.625
}
.leading-snug {
line-height: 1.375
}
.tracking-normal {
letter-spacing: 0em
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity))
}
.text-inherit {
color: inherit
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-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-blue-500\/20 {
--tw-shadow-color: rgb(59 130 246 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:shadow-blue-500\/40:hover {
--tw-shadow-color: rgb(59 130 246 / 0.4);
--tw-shadow: var(--tw-shadow-colored)
}
.focus\:opacity-\[0\.85\]:focus {
opacity: 0.85
}
.focus\:shadow-none:focus {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.active\:opacity-\[0\.85\]:active {
opacity: 0.85
}
.active\:shadow-none:active {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.disabled\:pointer-events-none:disabled {
pointer-events: none
}
.disabled\:opacity-50:disabled {
opacity: 0.5
}
.disabled\:shadow-none:disabled {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}