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.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900" role="dialog" aria-modal="true">
<div class="bg-gray-900 rounded-lg shadow-lg max-w-sm w-full p-6">
<button class="absolute top-3 right-3 text-gray-500 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close">×</button>
<h2 class="text-xl text-white font-semibold mb-4">Blog Post Title</h2>
<img class="w-full h-32 object-cover rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image">
<p class="text-gray-300 dark:text-gray-200 mb-4">This is a simple modal component designed for displaying content in dark mode. It is responsive and features a clean layout that aids in reading.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-sm text-gray-400 dark:text-gray-300">Posted by John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">3 minutes ago</p>
</div>
</div>
</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 rétro vintage
Un composant modal rétro/vintage simple avec une palette de couleurs complémentaire pour présenter des travaux ou des produits, conçu à l’aide de Tailwind CSS.
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.