Componente de notificaciones
Un componente de notificaciones complejo diseñado con estética retro/vintage y colores vibrantes para el comercio electrónico, compatible con el modo oscuro.
Código HTML
<div class="relative z-10">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
<div class="space-y-4">
<div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
</div>
</div>
<div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
</div>
<div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
</div>
<div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de notificaciones
Un componente de notificaciones skeuomórfico para comercio electrónico con una combinación de colores vibrantes, una interfaz compleja, un diseño receptivo y compatibilidad con temas oscuros, creado con Tailwind CSS.
Componente de notificaciones
Componente de notificaciones de estilo skeuomorphism con diseño responsivo y soporte de tema oscuro. Este componente presenta un aspecto realista y en relieve para las notificaciones, que incluye un sutil efecto de sombra y brillo. Es totalmente sensible e incluye estilos distintos para el modo oscuro, lo que garantiza la legibilidad y el atractivo estético en todas las condiciones de iluminación. Utiliza imágenes de marcador de posición para avatares.
Componente de notificaciones
Un componente de notificaciones receptivo con estilo Material Design, combinación de colores complementaria y compatibilidad con el modo oscuro, creado con Tailwind CSS para un propósito.