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.
HTML Code
<div class="fixed z-50 inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900 transition-opacity duration-500 ease-in-out" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
<div class="bg-gray-100 dark:bg-gray-700 px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
Share Your Thoughts
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-300">
Engage with your friends and share ideas or posts directly here.
</p>
</div>
</div>
<div class="p-6">
<form class="space-y-4">
<textarea class="w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500" placeholder="What's on your mind?"></textarea>
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<button type="submit" class="inline-flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Post
</button>
</div>
</form>
</div>
<div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Close
</button>
</div>
</div>
</div>Composants associés
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.
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.
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.