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
Healthcare_Medical_Modal_Component
Un composant modal complexe et réactif pour les applications médicales/de santé, inspiré du Material Design avec une palette de couleurs Sunset/Warm. Comprend des éléments de formulaire, des images et la prise en charge du mode sombre.
Corporate_Professional_Forum_Modal
Un composant modal complexe, réactif et professionnel pour les plates-formes de forum/communauté avec une palette de couleurs analogue et une prise en charge du mode sombre.
Composant modal skeuomorphe
Un composant modal réactif complexe stylisé dans un design skeuomorphe avec des couleurs complémentaires pour le commerce électronique.