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
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.
Composante modale
Un composant modal complexe et réactif avec un design dégradé néon/électrique, adapté aux sites Web d’entreprise. Dispose de transitions fluides, d’une prise en charge du mode sombre et de plusieurs éléments interactifs.
Skeuomorphisme Composante modale terreuse
Un composant modal complexe et réactif avec un design Skeuomorphism, une palette de couleurs Earth tones et une prise en charge du thème sombre pour une utilisation en portefeuille. Comporte plusieurs éléments interactifs sans JavaScript.