پیشنمایش زنده
کد HTML
<div class="flex flex-col bg-white 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-gray-600 lg:text-3xl"
>
Starter
</h2>
<p class="mt-2 text-sm text-gray-500">Suitable to grow steadily.</p>
</div>
<div class="mt-6">
<p>
<span class="text-5xl font-light tracking-tight text-black">
$25
</span>
<span class="text-base font-medium text-gray-500"> /mo </span>
</p>
</div>
</div>
</div>
<div class="flex px-6 pb-8 sm:px-8">
<a
aria-describedby="tier-company"
class="flex items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full nline-flex hover:bg-transparent hover:border-black hover:text-black focus:outline-none focus-visible:outline-black text-sm focus-visible:ring-black"
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-black{--tw-border-opacity:1;border-color:rgb(0 0 0 / 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-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / 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-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline-black:focus-visible{outline-color:#000}.focus-visible\:ring-black:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0 / 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}}