Modal triadique 3D d’entreprise
Un composant modal réactif, conçu en 3D avec une palette de couleurs triadique, adapté aux sites Web d’entreprise et d’entreprise, avec prise en charge du mode sombre.
HTML Code
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center dark:bg-gray-900 dark:bg-opacity-70">
<div class="relative p-8 bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-3xl shadow-2xl transform transition-all duration-300 ease-in-out scale-100 opacity-100 rotate-x-0 group-hover:scale-105 group-hover:opacity-95 group-hover:rotate-x-3d-effect" style="transform-style: preserve-3d; transition: transform 0.6s ease; perspective: 1000px;">
<!-- 3D depth effect for modal container -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700 opacity-20 rounded-3xl" style="transform: translateZ(-20px);"></div>
<div class="relative z-10">
<h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-wide">
<span class="inline-block" style="transform: translateZ(20px);">Welcome</span>
<span class="inline-block" style="transform: translateZ(10px);">to</span>
<span class="inline-block" style="transform: translateZ(0px);">Our Business</span>
</h3>
<div class="flex flex-col items-center mb-6">
<img class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-600 mb-4 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="transform: translateZ(15px);">
<p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed text-center" style="transform: translateZ(5px);">
Thank you for visiting. Explore our services and discover how we can help your business grow.
</p>
</div>
<div class="grid grid-cols-2 gap-4 mb-6" style="transform: translateZ(10px);">
<div class="text-center p-3 bg-blue-100 dark:bg-blue-900 rounded-lg shadow-md">
<p class="text-blue-700 dark:text-blue-300 font-semibold text-lg">Solutions</p>
</div>
<div class="text-center p-3 bg-purple-100 dark:bg-purple-900 rounded-lg shadow-md">
<p class="text-purple-700 dark:text-purple-300 font-semibold text-lg">Innovation</p>
</div>
<div class="col-span-2 text-center p-3 bg-pink-100 dark:bg-pink-900 rounded-lg shadow-md">
<p class="text-pink-700 dark:text-pink-300 font-semibold text-lg">Growth</p>
</div>
</div>
<div class="flex justify-end space-x-4">
<button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white dark:from-blue-700 dark:to-purple-700 dark:text-gray-100 py-3 px-6 rounded-full font-bold shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(10px);">
Learn More
</button>
<button class="bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 py-3 px-6 rounded-full font-semibold shadow-md transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(5px);">
Close
</button>
</div>
</div>
</div>
</div>Composants associés
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.
Réseaux sociauxPostModal
Un composant modal simple, réactif, inspiré du Material Design, avec une palette de couleurs analogue, adapté aux applications de médias sociaux. Prend en charge le thème sombre.
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.