Réseaux sociauxPostModal
Un composant modal simple, réactif, inspiré du Material Design, avec une palette de couleurs analogue, adapté aux applications de médias sociaux. Prend en charge le thème sombre.
HTML Code
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center">
<div class="relative p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div class="mt-3 text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Post Created!</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-400">Your post has been successfully shared with your followers.</p>
<img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder image for social media post">
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-900">Awesome!</button>
</div>
</div>
</div>
</div>Composants associés
Composant modal skeuomorphe
Un composant modal réactif complexe stylisé dans un design skeuomorphe avec des couleurs complémentaires pour le commerce électronique.
Modal commercial complexe avec micro-interactions
Un composant modal complexe, réactif et aux tons terreux avec des micro-interactions, adapté aux sites Web d’entreprise, prenant en charge le mode sombre.
Modal skeuomorphe
Un composant modal simple, réactif, inspiré du skeuomorphic pour les plateformes de divertissement/médias, avec des couleurs neutres froides et la prise en charge du mode sombre.