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
Art_Deco_Government_Modal
Un componente modale reattivo ispirato all'Art Déco per siti Web governativi e di servizio pubblico, caratterizzato da motivi geometrici, stile lussuoso e una combinazione di colori analoga. Include il supporto per la modalità oscura.
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.
Industrial_Sepia_Medical_Modal
Un componente modale semplice e reattivo con un'estetica industriale delle materie prime, che utilizza toni seppia/marrone, progettato per applicazioni sanitarie/mediche, con supporto per la modalità scura.