CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Komponente "Funktionale 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.

Vorschau

HTML-Code 

<div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/237/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
   <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/238/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
</div>

Verwandte Komponenten

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

Art Deco Lila Dokumentationskomponente

Eine Dokumentations-/Wiki-Komponente mittlerer Komplexität mit einem Art-Déco-Designthema mit geometrischen Mustern und luxuriösem Styling in einem violetten/violetten Farbspektrum. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen

Highlight der Gaming-Funktionen

Eine reaktionsschnelle Gaming-Feature-Highlight-Komponente mit einem klaren, minimalistischen Design, das Typografie und ein Rastersystem betont, warme Neutraltöne verwendet und den Dunkelmodus unterstützt. Enthält ein großes Bild, einen Titel, eine Beschreibung und eine Aktionsschaltfläche.

Offen