Alert Messages Component
A simple Neumorphism-styled alert message component for business websites, featuring vibrant colors and responsive dark theme support using Tailwind CSS and no JavaScript.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="p-6 rounded-xl shadow-xl bg-gray-300 dark:bg-gray-700 dark:shadow-xl-dark">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
Successfully updated!
</p>
</div>
</div>
</div>
</div>Related Components
Alert Messages Component
An alert message component with a retro/vintage design, including support for dark mode and responsiveness.
Alert Messages Component
A simple, monochromatic alert message component for blogs with microinteraction-focused animations, dark mode support, and responsiveness.
Alert Messages Component
Retro/Vintage Grayscale Alert Message Component for Social Media with dark mode support