<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-900 px-4 sm:px-8">
<div class="max-w-2xl w-full space-y-4 py-6 sm:py-12">
<div class="bg-white shadow-sm rounded-2xl relative after:absolute after:inset-0.5 after:rounded-2xl after:bg-gradient-to-r after:from-green-50 after:to-transparent">
<div class="p-6 flex gap-x-5 sm:gap-x-8 relative z-10">
<div class="mx-auto flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-green-400 shadow-lg sm:mx-0 sm:h-12 sm:w-12">
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.9953 6.96425C21.387 6.57492 21.3889 5.94176 20.9996 5.55005C20.6102 5.15834 19.9771 5.15642 19.5854 5.54575L8.97661 16.0903L4.41377 11.5573C4.02196 11.1681 3.3888 11.1702 2.99956 11.562C2.61032 11.9538 2.6124 12.5869 3.0042 12.9762L8.27201 18.2095C8.66206 18.597 9.29179 18.5969 9.68175 18.2093L20.9953 6.96425Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-gray-700 font-semibold">Payment Received</h3>
<p class="text-gray-500 text-sm sm:text-base mt-2">Your payment has been successfully received. You have unlocked premium
services now.</p>
<a href="#" class="text-sm font-medium inline-flex mt-4 text-gray-700 hover:underline">View
payment</a>
</div>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-100 hover:text-gray-900 rounded-full text-sm w-10 h-10 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Close alert</span>
</button>
</div>
</div>
<div class="bg-white shadow-sm rounded-2xl relative after:absolute after:inset-0.5 after:rounded-2xl after:bg-gradient-to-r after:from-red-50 after:to-transparent">
<div class="p-6 flex gap-x-5 sm:gap-x-8 relative z-10">
<div class="mx-auto flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-red-400 shadow-lg sm:mx-0 sm:h-12 sm:w-12">
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4998 8.50004C15.1093 8.10952 14.4761 8.10952 14.0856 8.50004L11.9998 10.5858L9.91403 8.50004C9.5235 8.10952 8.89034 8.10952 8.49981 8.50004C8.10929 8.89057 8.10929 9.52373 8.49981 9.91425L10.5856 12L8.49981 14.0858C8.10928 14.4763 8.10928 15.1095 8.49981 15.5C8.89033 15.8906 9.5235 15.8906 9.91402 15.5L11.9998 13.4142L14.0856 15.5C14.4761 15.8906 15.1093 15.8906 15.4998 15.5C15.8903 15.1095 15.8903 14.4763 15.4998 14.0858L13.414 12L15.4998 9.91425C15.8903 9.52373 15.8903 8.89057 15.4998 8.50004Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9999 1.5774C12.3811 1.22013 11.6187 1.22013 10.9999 1.5774L3.47363 5.92269C2.85483 6.27996 2.47363 6.94021 2.47363 7.65474V16.3453C2.47363 17.0599 2.85483 17.7201 3.47363 18.0774L10.9999 22.4227C11.6187 22.7799 12.3811 22.7799 12.9999 22.4227L20.5262 18.0774C21.145 17.7201 21.5262 17.0599 21.5262 16.3453V7.65474C21.5262 6.94021 21.145 6.27996 20.5262 5.92269L12.9999 1.5774ZM19.5262 7.65474L11.9999 3.30945L4.47363 7.65474V16.3453L11.9999 20.6906L19.5262 16.3453V7.65474Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-gray-700 font-semibold">Database Connection Failure</h3>
<p class="text-gray-500 text-sm sm:text-base mt-2">We're encountering issues with connection to our system's database at
the moment</p>
</div>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-100 hover:text-gray-900 rounded-full text-sm w-10 h-10 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Close alert</span>
</button>
</div>
</div>
<div class="bg-white shadow-sm rounded-2xl relative after:absolute after:inset-0.5 after:rounded-2xl after:bg-gradient-to-r after:from-sky-50 after:to-transparent">
<div class="p-6 flex gap-x-5 sm:gap-x-8 relative z-10">
<div class="mx-auto flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-sky-400 shadow-lg sm:mx-0 sm:h-12 sm:w-12">
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4759 16.95C11.1997 16.95 10.9759 16.7261 10.9759 16.45V10.5864C10.9759 10.3102 11.1997 10.0864 11.4759 10.0864H12.5181C12.7943 10.0864 13.0181 10.3102 13.0181 10.5864V16.45C13.0181 16.7261 12.7943 16.95 12.5181 16.95H11.4759Z" fill="currentColor" />
<path d="M12.0018 8.63715C11.6982 8.63715 11.4377 8.53647 11.2204 8.33512C11.0062 8.13058 10.8992 7.88608 10.8992 7.60163C10.8992 7.32038 11.0062 7.07909 11.2204 6.87774C11.4377 6.67319 11.6982 6.57092 12.0018 6.57092C12.3054 6.57092 12.5643 6.67319 12.7784 6.87774C12.9958 7.07909 13.1044 7.32038 13.1044 7.60163C13.1044 7.88608 12.9958 8.13058 12.7784 8.33512C12.5643 8.53647 12.3054 8.63715 12.0018 8.63715Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-gray-700 font-semibold">Update Privacy Policy</h3>
<p class="text-gray-500 text-sm sm:text-base mt-2">We have updated our privacy policy to ensure better protection of your
personal information</p>
</div>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-100 hover:text-gray-900 rounded-full text-sm w-10 h-10 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Close alert</span>
</button>
</div>
</div>
</div>
</div>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
fontFamily: {
sans: ["Inter", "sans-serif"],
}
}
}
}
The Alert component designed with the Tailwind CSS Framework can be used across a wide range of web applications and websites. Its versatility makes it suitable for various scenarios where notifying users about important information or alerts is necessary. This component can be effectively employed in e-commerce platforms to alert users about promotions, sales, or limited-time offers. It can also be utilized in educational websites to inform users about system updates, deadlines, or noteworthy announcements. Furthermore, the Alert can find usage in social networking platforms to notify users about new messages, friend requests, or any other interactive activities. With its visually appealing design and ability to capture user attention, the Alert component can seamlessly integrate into any web development project, enhancing overall user experience and engagement.