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
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.
Composante modale
Un composant modal complexe, réactif et interactif pour le e-commerce, avec des couleurs complémentaires et des micro-interactions pour l’engagement des utilisateurs. Prend en charge le thème sombre.
Tableau de bord Neon Modal
Un modal de tableau de bord complexe et réactif avec des effets de néon/lueur, utilisant des couleurs d’automne, la prise en charge du mode sombre et des éléments interactifs. Conçu pour la visualisation de données et les panneaux de contrôle.