Componenti Capitale Componente modale modalità oscura

Componente modale modalità oscura

Un componente modale in modalità oscura semplice e reattivo progettato per la lettura e il consumo di contenuti. Presenta una combinazione di colori complementari e un layout minimale, adatto per blog o siti Web basati sui contenuti.

Anteprima

Codice HTML

<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>

Componenti correlati

Modale di progettazione dei materiali

Un componente modale in stile Material Design con design reattivo e supporto per temi scuri. Include una sovrapposizione modale, un contenitore modale con un aspetto simile a una carta e un pulsante di chiusura. Non è incluso alcun JavaScript.

Aperto

Componente modale vintage retrò

Un componente modale reattivo retrò/vintage progettato con Tailwind CSS che include il supporto della modalità oscura e un'estetica nostalgica degli anni '80/'90.

Aperto

GlassmorphismModalComponent

Un componente modale in stile Glassmorphism con combinazione di colori analoga, complessità moderata, adatto per la visualizzazione di blog/contenuti. Presenta un design reattivo con supporto per il tema scuro utilizzando Tailwind CSS.

Aperto