CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten für die Inhaltsanzeige Komponente "Inhaltsanzeige"

Komponente "Inhaltsanzeige"

Eine Content-Display-Komponente mit Glassmorphism-Design mit responsivem Layout und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
    <div class="mt-4">
      <img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
    </div>
    <div class="mt-4 flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
      <span class="text-gray-600 dark:text-gray-300">John Doe</span>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Komponenten für die Inhaltsanzeige"

Eine Komponente zur responsiven Inhaltsanzeige mit Unterstützung des Dunkelmodus für Geschäfts-/Unternehmenswebsites.

Offen

Komponente "Inhaltsanzeige"

Eine einfache, reaktionsschnelle Komponente zur Anzeige von Inhalten, die im brutalistischen Stil mit Komplementärfarben gestaltet ist. Geeignet für Geschäfts-/Unternehmenswebsites, die den Dunkelmodus unterstützen.

Offen

Komponente "Komponenten für die Inhaltsanzeige"

Eine Komponente zur Inhaltsanzeige mit Mikrointeraktionen, responsivem Design und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS. Verfügt über subtile Hover-Effekte und fokussiert Animationen auf interaktive Elemente.

Offen