Komponenten Layout-Komponenten Komponente "Layout-Komponenten"

Komponente "Layout-Komponenten"

Eine responsive Webkomponente, die in einem skeuomorphen Stil gestaltet wurde und ein monochromatisches Farbschema für Geschäfts-/Unternehmenswebsites aufweist. Enthält interaktive Elemente für eine reichhaltige Benutzeroberfläche und unterstützt den Dunkelmodus.

Vorschau

HTML-Code

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
  <h1 class="text-3xl font-bold mb-4">Corporate Dashboard</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Company Overview</h2>
      <img src="https://picsum.photos/200/100" alt="Company Overview" class="rounded-lg mb-2" />
      <p class="mb-2">Overview of company performance and metrics. Check out the latest updates and key statistics.</p>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Details</button>
    </div>
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Team Members</h2>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Member 1" class="w-12 h-12 rounded-full mr-3" />
        <p>John Doe - CEO</p>
      </div>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Member 2" class="w-12 h-12 rounded-full mr-3" />
        <p>Jane Smith - CTO</p>
      </div>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Team</button>
    </div>
  </div>
  <div class="mt-4 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-xl font-semibold">Latest Reports</h2>
    <ul class="list-disc pl-5">
      <li><a href="#" class="text-blue-400 hover:underline">Q1 2023 Financial Report</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Market Trends Analysis</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Competitor Comparison</a></li>
    </ul>
  </div>
</div>

Verwandte Komponenten

Layout-Komponenten Komponente 40

Eine reaktionsschnelle Layoutkomponente mit Mikrointeraktionen und ansprechenden Animationen. Es enthält eine Kartenstruktur mit Benutzerinteraktionen wie Hover-Effekten, Skalierung und Anpassungen dunkler Themen.

Offen

Social-Media-Layout-Komponente

Eine reaktionsschnelle und komplexe, von 3D inspirierte Social-Media-Layout-Komponente mit lebendigen Farben und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es enthält eine Kopfzeile mit Logo und Navigation, einen Hauptinhaltsbereich mit dynamischen Karten für Beiträge und eine Seitenleiste für Benutzerprofile und Trendthemen. Jedes Element ist so gestaltet, dass es ein Gefühl von Tiefe und Interaktion vermittelt.

Offen

E-Commerce-Layout mit 3D-Design

Ein responsives Webkomponenten-Layout für den E-Commerce mit 3D-Designelementen, das ein komplementäres Farbschema und Unterstützung für dunkle Themen enthält. Es enthält Produktkarten, eine Navigationsleiste und eine Fußzeile, die alle mit Tailwind CSS gestaltet sind.

Offen