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

Komponente "Inhaltsanzeige"

Eine reaktionsschnelle Inhaltsanzeigekomponente im Glassmorphism-Stil mit verschwommenem Hintergrund und durchscheinenden Elementen mit Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
                <span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
            </div>
        </div>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
    </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

SimpleContentDisplay

Eine einfache Inhaltsanzeigekomponente mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Komponente "Inhaltsanzeige"

Eine Komponente im Glassmorphism-Stil für die Anzeige von Portfolioinhalten mit interaktiven Elementen, die den Dunkelmodus unterstützt.

Offen