CCHub Logo CCHub Tailwind Collection
Komponenten Karten Brutalistische Kartenkomponente

Brutalistische Kartenkomponente

Eine brutalistische Kartenkomponente mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-black border border-black dark:border-white p-6 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] max-w-sm mx-auto">
  <img class="w-full h-48 object-cover border border-black dark:border-white mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Random image">
  <h2 class="text-2xl font-bold text-black dark:text-white mb-2">Brutalist Card Title</h2>
  <p class="text-black dark:text-white mb-4">This is a description for the brutalist card component, showcasing a raw and bold design approach.</p>
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full border border-black dark:border-white mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <span class="text-black dark:text-white">John Doe</span>
  </div>
  <button class="bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white transition-colors duration-300">Read More</button>
</div>

Verwandte Komponenten

Karten-Komponente

Eine komplexe Kartenkomponente, die für den Dunkelmodus entwickelt wurde und sich für den Konsum von Blogs und Inhalten mit einem triadischen Farbschema eignet.

Offen

Komponente "Skeuomorphe Karten"

Inspiriert vom Skeuomorphismus ist die folgende Kartenkomponente vollständig responsiv und unterstützt dunkle Themen. Für den Dunkelmodus ist CSS-Unterstützung ausreichend. Es wird kein JavaScript benötigt.

Offen

3D-Karten-Komponente

Eine reaktionsschnelle Kartenkomponente mit einem 3D-Designstil, lebendigen Farben und mehreren interaktiven Elementen, die sich für ein Dashboard eignet. Es unterstützt den Dunkelmodus mit dem dunklen Präfix von Tailwind.

Offen