Modal commercial complexe avec micro-interactions
Un composant modal complexe, réactif et aux tons terreux avec des micro-interactions, adapté aux sites Web d’entreprise, prenant en charge le mode sombre.
HTML Code
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
<div class="p-8 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800 transform transition-all duration-500 ease-in-out scale-95 hover:scale-100">
<div class="text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Modal Title</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-300">This is a complex modal with various interactive elements and a beautiful earth-toned color scheme, designed for business websites and supports dark mode.</p>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-green-700 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 transition transform duration-150 ease-in-out hover:scale-105">OK</button>
<button id="cancel-btn" class="ml-3 px-4 py-2 bg-red-700 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 transition transform duration-150 ease-in-out hover:scale-105">Cancel</button>
</div>
</div>
</div>
</div>Composants associés
Tableau de bord Neon Modal
Un modal de tableau de bord complexe et réactif avec des effets de néon/lueur, utilisant des couleurs d’automne, la prise en charge du mode sombre et des éléments interactifs. Conçu pour la visualisation de données et les panneaux de contrôle.
Composant modal skeuomorphe
Un composant modal réactif complexe stylisé dans un design skeuomorphe avec des couleurs complémentaires pour le commerce électronique.
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.