Design Matériel Modal
Un composant modal de style Material Design avec un design réactif et une prise en charge du thème sombre. Comprend une superposition modale, un conteneur modal avec une apparence de carte et un bouton de fermeture. Aucun JavaScript n’est inclus.
HTML Code
<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>Composants associés
Composant modal skeuomorphe
Un composant modal réactif complexe stylisé dans un design skeuomorphe avec des couleurs complémentaires pour le commerce électronique.
RétroVintageEarthToneModal
Composant modal rétro/vintage dans des tons de terre pour le tableau de bord avec mode sombre et réactivité
Blog rétro modal
Un composant modal d’inspiration rétro-vintage pour le contenu d’un blog, avec une palette de couleurs complémentaires, une complexité modérée avec des éléments interactifs, un design réactif et la prise en charge du mode sombre. Aucun JavaScript n’est utilisé, s’appuyant uniquement sur les classes HTML et CSS Tailwind. Les images proviennent de picsum.photos et les avatars de randomuser.me.