پیشنمایش زنده
کد HTML
<div class="flex flex-col bg-black rounded-3xl">
<div class="px-6 py-8 sm:p-10 sm:pb-6">
<div class="grid items-center justify-center w-full grid-cols-1 text-left">
<div>
<h2 class="text-lg font-medium tracking-tighter text-white lg:text-3xl">
Corporate
</h2>
<p class="mt-2 text-sm text-gray-100">Grow steadily and pizza.</p>
</div>
<div class="mt-6">
<p>
<span class="text-5xl font-light tracking-tight text-white">
$35
</span>
<span class="text-base font-medium text-white"> /mo </span>
</p>
</div>
</div>
</div>
<div class="flex px-6 pb-8 sm:px-8">
<a aria-describedby="tier-starter" class="items-center justify-center w-full px-6 py-2.5 text-center text-black duration-200 bg-white border-2 border-white rounded-full nline-flex hover:bg-transparent hover:border-white hover:text-white focus:outline-none focus-visible:outline-white text-sm focus-visible:ring-white" href="#">
Get started
</a>
</div>
</div>
کد CSS
.mt-2 {
margin-top: 0.5rem
}
.mt-6 {
margin-top: 1.5rem
}
.flex {
display: flex
}
.grid {
display: grid
}
.w-full {
width: 100%
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.flex-col {
flex-direction: column
}
.items-center {
align-items: center
}
.justify-center {
justify-content: center
}
.rounded-3xl {
border-radius: 1.5rem
}
.rounded-full {
border-radius: 9999px
}
.border-2 {
border-width: 2px
}
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity))
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem
}
.pb-8 {
padding-bottom: 2rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-5xl {
font-size: 3rem;
line-height: 1
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.font-light {
font-weight: 300
}
.font-medium {
font-weight: 500
}
.tracking-tight {
letter-spacing: -0.025em
}
.tracking-tighter {
letter-spacing: -0.05em
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity))
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity))
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.duration-200 {
transition-duration: 200ms
}
.hover\:border-white:hover {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity))
}
.hover\:bg-transparent:hover {
background-color: transparent
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.focus-visible\:outline-white:focus-visible {
outline-color: #fff
}
.focus-visible\:ring-white:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))
}
@media (min-width: 640px) {
.sm\:p-10 {
padding: 2.5rem
}
.sm\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.sm\:pb-6 {
padding-bottom: 1.5rem
}
}
@media (min-width: 1024px) {
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
}