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

Blog Funktionale Komponente

Funktionale Komponenten Komponente mit 3D-Design, komplementäres Farbschema, moderate Komplexität für Blogs, reaktionsschnell mit Unterstützung für dunkle Themen. Kein JS, nur HTML und Tailwind.

Offen

Komponente "Funktionale Komponenten"

Eine Dashboard-Komponente mit funktionalen Komponenten, die Material-Design-Prinzipien verwenden, ein analoges Farbschema und moderate Komplexität. Die Komponente umfasst Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS. Es ist kein JavaScript enthalten.

Offen

Komponente "Funktionale Komponenten"

Eine minimalistische Portfolio-Komponente, die mit Tailwind CSS entworfen wurde, ein lebendiges Farbschema aufweist und den Dunkelmodus unterstützt. Diese Komponente ist für die Präsentation von Arbeiten oder Produkten vorgesehen und enthält Bilder und Avatar-Platzhalter.

Offen