CCHub Logo CCHub Tailwind Collection
Komponenten Layout-Komponenten Glassmorphism Geschäftslayout

Glassmorphism Geschäftslayout

Eine einfache, reaktionsschnelle Glassmorphism-Layoutkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS mit Erdtönen.

Vorschau

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

E-Commerce-Layout-Komponente

Eine responsive E-Commerce-Layout-Komponente mit Unterstützung für dunkle Themen, die mit Tailwind CSS nach den Prinzipien des Material Designs erstellt wurde. Es enthält eine Navigationsleiste, einen Hauptinhaltsbereich mit Produktlisten und eine Fußzeile. Die Farbgebung ist pastellfarben.

Offen

Komponente "Layout-Komponenten"

Ein responsives Webkomponenten-Layout nach Material Design-Prinzipien für eine Social-Media-Anwendung mit Unterstützung für dunkle Themen.

Offen

Minimalistische Blog-Layout-Komponente

Minimalistische Blog-Layout-Komponente mit monochromatischem Farbschema für den Konsum von Inhalten, reaktionsschnell und mit Unterstützung für dunkle Themen.

Offen