Glassmorphism Aménagement d’entreprise
Un composant de mise en page glassmorphism simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS, avec des tons de terre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 p-8 rounded-xl shadow-lg w-4/5 md:w-2/3 lg:w-1/2 backdrop-filter backdrop-blur-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Business Layout Component</h1>
<p class="text-gray-600 dark:text-gray-300">This is a simple layout component showcasing glassmorphism with earth tones, suitable for business websites. It is responsive and supports dark mode.</p>
<div class="mt-6 flex flex-col md:flex-row justify-between items-center">
<div class="text-gray-700 dark:text-gray-200 mb-4 md:mb-0">
<p>Contact Information:</p>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</div>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
</div>
</div>
</div>Composants associés
Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce réactif avec prise en charge du thème sombre, construit avec Tailwind CSS selon les principes de Material Design. Il comprend une barre de navigation, une zone de contenu principale avec des listes de produits et un pied de page. La palette de couleurs est pastel.
Glassmorphism E-commerce Feature Layout Component
Glassmorphism E-commerce Feature Layout Component
Composants de mise en page Composant 40
Un composant de mise en page réactif avec des micro-interactions avec des animations attrayantes. Il comprend une structure de carte avec des interactions utilisateur telles que des effets de survol, une mise à l’échelle et des ajustements de thème sombre.