Composants Capital Composant modal en mode sombre

Composant modal en mode sombre

Un composant modal en mode sombre simple et réactif conçu pour la lecture et la consommation de contenu. Il présente une palette de couleurs complémentaires et une mise en page minimale, adaptée aux blogs ou aux sites Web axés sur le contenu.

Aperçu

HTML Code

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900" role="dialog" aria-modal="true">
    <div class="bg-gray-900 rounded-lg shadow-lg max-w-sm w-full p-6">
        <button class="absolute top-3 right-3 text-gray-500 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close">&times;</button>
        <h2 class="text-xl text-white font-semibold mb-4">Blog Post Title</h2>
        <img class="w-full h-32 object-cover rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image">
        <p class="text-gray-300 dark:text-gray-200 mb-4">This is a simple modal component designed for displaying content in dark mode. It is responsive and features a clean layout that aids in reading.</p>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <p class="text-sm text-gray-400 dark:text-gray-300">Posted by John Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 minutes ago</p>
            </div>
        </div>
    </div>
</div>

Composants associés

Composante modale

Composant modal complexe et réactif avec un schéma de couleurs noir, blanc et accentué, avec des transitions de dégradé adaptées aux applications industrielles/manufacturières. Inclut la prise en charge du mode sombre.

Ouvrir

Réseaux sociauxPostModal

Un composant modal simple, réactif, inspiré du Material Design, avec une palette de couleurs analogue, adapté aux applications de médias sociaux. Prend en charge le thème sombre.

Ouvrir

Design Matériel Modal

Un composant modal de style Material Design avec un design réactif et une prise en charge du thème sombre. Comprend une superposition modale, un conteneur modal avec une apparence de carte et un bouton de fermeture. Aucun JavaScript n’est inclus.

Ouvrir