Glassmorphism Geschäftslayout
Eine einfache, reaktionsschnelle Glassmorphism-Layoutkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS mit Erdtönen.
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>
Verwandte Komponenten
Komponente "Layout-Komponenten"
Eine responsive Dashboard-Layout-Komponente mit einem dunklen Design, einer Seitenleiste und einem Hauptinhaltsbereich. Es verwendet ein triadisches Farbschema für die visuelle Attraktivität.
Komponente "Layout-Komponenten"
Eine Layout-Komponente, die in einem skeuomorphen Stil gestaltet ist, der reale Gegenstücke nachahmt, mit responsiven Elementen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.
Layout-Komponente im Dunkelmodus
Eine reaktionsschnelle Layoutkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verfügt über eine einfache Kopfzeile, einen Inhaltsbereich und eine Fußzeile. Der Dunkelmodus wird in Tailwind-Klassen durch das Präfix 'dark:' behandelt.