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
Organic_Nature_Modal_Documentation
Un composant modal simple et réactif avec un design organique/inspiré de la nature utilisant des tons de terre, adapté à la documentation ou aux sites wiki. Inclut la prise en charge du mode sombre.
Art_Deco_Government_Modal
Un composant modal réactif, inspiré de l’Art déco, pour les sites Web du gouvernement et des services publics, avec des motifs géométriques, un style luxueux et une palette de couleurs analogue. Inclut la prise en charge du mode sombre.
Composante modale
Un composant modal réactif doté de micro-interactions et d’une palette de couleurs triadiques, conçu pour les interfaces de médias sociaux. Il propose des animations qui engagent les utilisateurs lors de l’interaction et fournit une prise en charge du thème sombre à l’aide de Tailwind CSS.