Composant de récipient Glassmorphism
Glassmorphism Container Component avec effets réactifs et prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen from-teal-100 via-teal-300 to-teal-500 bg-gradient-to-br dark:from-gray-700 dark:via-gray-900 dark:to-black">
<div class="bg-white bg-opacity-10 px-10 py-5 border-r-8 border-t-8 border-opacity-30 border-white
backdrop-filter backdrop-blur-sm shadow-2xl rounded-md w-full max-w-md hover:scale-105 transition duration-500 ease-in-out dark:bg-gray-900 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30">
<h1 class="text-3xl font-bold text-gray-900 text-center dark:text-white mb-6">Welcome</h1>
<p class="text-gray-700 text-center dark:text-gray-300 mb-8">This is a Glassmorphism container component example with responsive effects and dark theme support.</p>
<div class="flex justify-center">
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-teal-500 group-hover:from-teal-300 group-hover:to-teal-500 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-teal-200 dark:focus:ring-teal-800">
<span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
Get Started
</span>
</button>
</div>
</div>
</div>Composants associés
Composant de conteneur 21
Un composant de conteneur réactif de style rétro/vintage avec prise en charge du thème sombre.
Composant de conteneur brutaliste
Un composant de conteneur simple mais audacieux conçu avec un style brutaliste et une palette de couleurs vives, adapté aux sites Web d’entreprise ou d’entreprise, prenant en charge le mode sombre à l’aide de Tailwind CSS.
Conteneur skeeumorphe des médias sociaux
Un conteneur de médias sociaux skeuomorphe conçu avec un schéma monochromatique, avec des ombres douces, des dégradés subtils et des bords arrondis pour imiter des éléments du monde réel tels que des boutons et des cartes, adapté à l’affichage de publications ou de profils d’utilisateurs. Comprend une réactivité complète et la prise en charge du mode sombre.