CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Komponente "Funktionale Komponenten"

Komponente "Funktionale Komponenten"

Eine Komponente im Glassmorphism-Designstil mit responsiven Effekten und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex flex-row items-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
            Passionate about building intuitive and dynamic user experiences. I love coding and design.
        </p>
        <img class="rounded-lg shadow-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image" />
        <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Contact Me</button>
    </div>
</div>
<style>
    /* Dark Mode CSS */
    @media (prefers-color-scheme: dark) {
        .bg-opacity-30 {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
</style>

Verwandte Komponenten

Komponente "Funktionale Komponenten"

Eine Webkomponente, die reale Gegenstücke im Business-Corporate-Stil mit einem komplementären Farbschema, einem einfachen Layout und einem responsiven Design mit Unterstützung des Dunkelmodus nachahmt.

Offen

Komponente "Funktionale Komponenten"

Eine Dashboard-Komponente mit funktionalen Komponenten, die Material-Design-Prinzipien verwenden, ein analoges Farbschema und moderate Komplexität. Die Komponente umfasst Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS. Es ist kein JavaScript enthalten.

Offen

Funktionale Komponenten

Eine funktionale Komponente mit skeuomorphem Design, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen