Composant modal en mode sombre
Un composant modal réactif simple conçu pour les interfaces de médias sociaux en mode sombre avec une palette de couleurs pastel.
HTML Code
<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
<div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
<h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
<p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
<span class="text-pink-200 font-semibold">John Doe</span>
</div>
<img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
<button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
<button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
</div>
</div>Composants associés
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.
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.
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.