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
Healthcare_Medical_Modal_Component
Un composant modal complexe et réactif pour les applications médicales/de santé, inspiré du Material Design avec une palette de couleurs Sunset/Warm. Comprend des éléments de formulaire, des images et la prise en charge du mode sombre.
RétroBookingModal
Un composant modal de réservation/réservation à thème rétro avec des couleurs pastel, un design réactif et une prise en charge du mode sombre, adapté aux systèmes de rendez-vous.
VerremorphismeModalComposant
Un composant modal de style Glassmorphism avec une palette de couleurs analogue, une complexité modérée, adapté à l’affichage de blogs/contenus. Dispose d’un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.