Blog rétro modal
Un composant modal d’inspiration rétro-vintage pour le contenu d’un blog, avec une palette de couleurs complémentaires, une complexité modérée avec des éléments interactifs, un design réactif et la prise en charge du mode sombre. Aucun JavaScript n’est utilisé, s’appuyant uniquement sur les classes HTML et CSS Tailwind. Les images proviennent de picsum.photos et les avatars de randomuser.me.
HTML Code
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-cyan-800 dark:text-white">
<div class="mt-3 text-center">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-cyan-100 dark:bg-cyan-600">
<svg class="h-6 w-6 text-cyan-600 dark:text-cyan-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-200">Modal Content Goes Here. Replace with your blog content or message.</p>
<img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder Image">
<div class="flex justify-center mt-4">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
</div>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-cyan-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-300 dark:bg-cyan-700 dark:hover:bg-cyan-900 dark:focus:ring-cyan-800">
Close
</button>
</div>
</div>
</div>
</div>Composants associés
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.
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.
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.