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.
Composant modal en mode sombre
Un composant modal en mode sombre simple et réactif conçu pour la lecture et la consommation de contenu. Il présente une palette de couleurs complémentaires et une mise en page minimale, adaptée aux blogs ou aux sites Web axés sur le contenu.
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.