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.
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">
×
</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à
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.
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.