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

Komponente "Inhaltsanzeige"

Eine reaktionsschnelle Komponente zur Anzeige von Inhalten, die Mikrointeraktionen mit ansprechenden Animationen umfasst, die sich auf Benutzeraktionen konzentrieren. Es umfasst Unterstützung für den Dunkelmodus und Platzhalter für Bilder und Avatare.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <div class="p-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
        <p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
        <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
    </div>
</div>

Verwandte Komponenten

Komponente "Komponenten für die Inhaltsanzeige"

Eine reaktionsschnelle Komponente zur Anzeige von Inhalten, die für Geschäfts-/Unternehmenswebsites mit Unterstützung des Dunkelmodus und einem lebendigen Farbschema entwickelt wurde. Es enthält Abschnitte für Benutzer-Avatare, Textinhalte und Bilder.

Offen

Komponente "Inhaltsanzeige"

Eine nostalgische Display-Komponente im Retro-Design mit responsiven Effekten und Unterstützung für dunkle Themen.

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