Componentes Mensajes de éxito Mensajes de éxito Componente 17

Mensajes de éxito Componente 17

Un componente de mensajes de éxito audaz y crudo diseñado con Tailwind CSS con efectos responsivos y soporte para temas oscuros.

Vista previa

Código HTML

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full border-2 border-green-500 mr-3">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-400">Success!</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        Your operation was completed successfully. Check your account for the latest updates!
    </p>
    <div class="flex justify-end mt-4">
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Close
        </button>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #2D3748;
        }
        .text-gray-700 {
            color: #E2E8F0;
        }
    }
</style>

Componentes relacionados

SuccessMessagesComponent

Un componente de mensaje de éxito simple para el comercio electrónico, con una estética de diseño de material monocromática, diseño receptivo y soporte de tema oscuro.

Abrir

SkeuomorphismSuccessMessage

Mensaje de éxito de Skeuomorphism para el tablero, complejo con colores complementarios y modo oscuro

Abrir

Componente Mensajes de éxito

Un componente de mensaje de éxito simple y artístico con un esquema de color sepia/marrón, adecuado para aplicaciones de criptomonedas/blockchain. Cuenta con un diseño suave inspirado en la acuarela, capacidad de respuesta total y compatibilidad con el modo oscuro.

Abrir