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.
Codice HTML
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div class="mt-3 text-center">
<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-300">Modal content goes here. This is a placeholder for your information.</p>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Got It!</button>
</div>
</div>
</div>
</div>Componenti correlati
Skeuomorfismo Componente modale terroso
Un componente modale complesso e reattivo con design Skeuomorphism, combinazione di colori dei toni della Terra e supporto del tema scuro per l'uso del portfolio. Presenta più elementi interattivi senza JavaScript.
SocialMediaPostModal
Un componente modale semplice, reattivo, ispirato al Material Design con combinazione di colori analoga, adatto per applicazioni di social media. Supporta il tema scuro.
Componente modale scheumorfico
Un componente modale reattivo complesso con un design scheumorfico con colori complementari per l'e-commerce.