CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Komponente "Funktionale Komponenten"

Komponente "Funktionale Komponenten"

Eine Webkomponente, die reale Gegenstücke im Business-Corporate-Stil mit einem komplementären Farbschema, einem einfachen Layout und einem responsiven Design mit Unterstützung des Dunkelmodus nachahmt.

Vorschau

HTML-Code 

<div class="p-6 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
    </div>
  </div>
  <div class="mt-4">
    <p class="text-gray-700 dark:text-gray-300">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
  </div>
  <div class="mt-4">
    <img class="w-full h-32 rounded-lg" src="https://picsum.photos/400/200" alt="Business Image">
  </div>
  <div class="mt-4">
    <a href="#" class="inline-block px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Contact</a>
  </div>
</div>

Verwandte Komponenten

Komponente "Funktionale Komponenten"

Eine funktionale Komponente mit 3D-Design, responsiven Effekten und Unterstützung für den Dunkelmodus, die mit Tailwind CSS implementiert wurde.

Offen

E-Commerce-Produktkarte mit Mikrointeraktionen

Eine einfache E-Commerce-Produktkarte mit triadischem Farbschema und Mikrointeraktionselementen zum Hinzufügen in den Warenkorb und zum Liken mit Unterstützung für Reaktionsfähigkeit und Dunkelmodus.

Offen

Von Papier/Druck inspirierte monochrome Regierungskomponente

Eine Komponente mittlerer Komplexität, die physisches Papier und Druckmaterialien nachahmt und für Websites von Behörden/öffentlichen Diensten mit einem monochromatischen Farbschema und vollständiger Reaktionsfähigkeit entwickelt wurde, einschließlich Unterstützung des Dunkelmodus.

Offen