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
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.
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.
Paper_Print_Inspired_Autumn_Modal_Component
Un composant modal complexe et réactif inspiré du papier et des matériaux imprimés, avec des couleurs automnales. Conçu pour les plates-formes éducatives, il inclut la prise en charge du mode sombre et du HTML sémantique.