Blog retrò modale
Un componente modale di ispirazione retrò-vintage per i contenuti del blog, caratterizzato da una combinazione di colori complementari, complessità moderata con elementi interattivi, design reattivo e supporto per la modalità oscura. Non viene utilizzato JavaScript, basandosi esclusivamente sulle classi HTML e CSS Tailwind. Le immagini provengono da picsum.photos e gli avatar da randomuser.me.
Codice HTML
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-cyan-800 dark:text-white">
<div class="mt-3 text-center">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-cyan-100 dark:bg-cyan-600">
<svg class="h-6 w-6 text-cyan-600 dark:text-cyan-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-200">Modal Content Goes Here. Replace with your blog content or message.</p>
<img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder Image">
<div class="flex justify-center mt-4">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
</div>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-cyan-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-300 dark:bg-cyan-700 dark:hover:bg-cyan-900 dark:focus:ring-cyan-800">
Close
</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente modale modalità oscura
Un semplice componente modale reattivo progettato per le interfacce dei social media in modalità oscura con una combinazione di colori pastello.
Componente modale
Un componente modale reattivo con microinterazioni e combinazione di colori triadica, progettato per le interfacce dei social media. Presenta animazioni che coinvolgono gli utenti durante l'interazione e fornisce supporto per il tema scuro utilizzando Tailwind CSS.
Componente modale scheumorfico
Un componente modale reattivo complesso con un design scheumorfico con colori complementari per l'e-commerce.