Componentes Capital Componente modal de modo oscuro

Componente modal de modo oscuro

Un componente modal responsivo simple diseñado para interfaces de redes sociales en modo oscuro con un esquema de color pastel.

Vista previa

Código HTML

<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
    <div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
        <h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
        <p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <span class="text-pink-200 font-semibold">John Doe</span>
        </div>
        <img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
        <button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
        <button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
    </div>
</div>

Componentes relacionados

Retro Blog Modal

Un componente modal de inspiración retro-vintage para el contenido del blog, con una combinación de colores complementaria, una complejidad moderada con elementos interactivos, un diseño responsivo y compatibilidad con el modo oscuro. No se utiliza JavaScript, confiando únicamente en las clases HTML y CSS de Tailwind. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.

Abrir