پیشنمایش زنده
کد HTML
<div class="w-full max-w-[570px] rounded-[20px] bg-white py-12 px-8 text-center md:py-[60px] md:px-[70px]">
<h3 class="text-gray-900 pb-2 text-xl font-bold sm:text-2xl">Your Message Sent Successfully</h3>
<span class="bg-blue-500 mx-auto mb-6 inline-block h-1 w-[90px] rounded"></span>
<p class="text-gray-500 mb-10 text-base leading-relaxed">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<div class="flex flex-wrap gap-4">
<div class="flex-1">
<button class="text-gray-900 block w-full rounded-lg border border-gray-200 p-3 text-center text-base font-medium transition hover:border-red-600 hover:bg-red-600 hover:text-white">Cancel</button>
</div>
<div class="flex-1">
<button class="bg-blue-500 whitespace-nowrap border-blue-500 block w-full rounded-lg border p-3 text-center text-base font-medium text-white transition hover:bg-opacity-90">View Details</button>
</div>
</div>
</div>
کد CSS
.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-1{height:0.25rem}.w-\[90px\]{width:90px}.w-full{width:100%}.max-w-\[570px\]{max-width:570px}.flex-1{flex:1 1 0%}.flex-wrap{flex-wrap:wrap}.gap-4{gap:1rem}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-\[20px\]{border-radius:20px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.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-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-3{padding:0.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pb-2{padding-bottom:0.5rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-relaxed{line-height:1.625}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:border-red-600:hover{--tw-border-opacity:1;border-color:rgb(220 38 38 / var(--tw-border-opacity))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.hover\:bg-opacity-90:hover{--tw-bg-opacity:0.9}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}@media (min-width: 640px){.sm\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (min-width: 768px){.md\:px-\[70px\]{padding-left:70px;padding-right:70px}.md\:py-\[60px\]{padding-top:60px;padding-bottom:60px}}