Componenti Capitale Componente modale vintage retrò

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.

Anteprima

Codice HTML

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 transition-opacity" id="modal-wrapper">
    <div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6 sm:p-8">
        <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-300">Retro Modal Title</h2>
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none" id="modal-close">
                &times;
            </button>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">This is a nostalgic modal component inspired by the vintage aesthetics of the 80s and 90s. It features a simple layout and dark mode support.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end">
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Action</button>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        #modal-wrapper {
            background-color: rgba(31, 41, 55, 0.75);
        }
    }
</style>

Componenti correlati

RetroVintageTerraTonoModal

Componente modale retrò/vintage nei toni della terra per cruscotto con modalità oscura e reattività

Aperto

Paper_Print_Inspired_Autumn_Modal_Component

Un componente modale complesso e reattivo ispirato alla carta e ai materiali di stampa, caratterizzato dai colori autunnali. Progettato per le piattaforme educative, include il supporto per la modalità oscura e l'HTML semantico.

Aperto

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.

Aperto