پیشنمایش زنده
کد HTML
<div
class="bg-gradient-to-r from-blue-400 to-indigo-500 rounded-lg overflow-hidden shadow-xl max-w-sm"
>
<div class="p-4">
<h2 class="text-lg font-semibold mb-2 text-white">Hello Traveler,</h2>
<p class="text-sm mb-4 text-white">
This website uses cookies to enhance user experience and to analyze
performance and traffic on our website.
</p>
<div class="flex justify-end space-x-4">
<button
class="duration-300 bg-black/0 hover:bg-black/25 text-white font-bold py-2 px-4 rounded"
>
Accept
</button>
<button
class="duration-300 bg-black/0 hover:bg-black/25 text-white font-bold py-2 px-4 rounded"
>
Decline
</button>
</div>
</div>
</div>
کد CSS
.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.flex{display:flex}.max-w-sm{max-width:24rem}.justify-end{justify-content:flex-end}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:0.5rem}.bg-black\/0{background-color:rgb(0 0 0 / 0)}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-indigo-500{--tw-gradient-to:#6366f1 var(--tw-gradient-to-position)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.duration-300{transition-duration:300ms}.hover\:bg-black\/25:hover{background-color:rgb(0 0 0 / 0.25)}