CCHub Logo CCHub Tailwind Collection
Komponenten Container Neumorphe Containerkomponente

Neumorphe Containerkomponente

Eine reaktionsschnelle Neumorphic-Containerkomponente für die Präsentation von Arbeiten oder Produkten, die mit einem triadischen Farbschema und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS entworfen wurde.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-gray-300 dark:bg-gray-900 shadow-neumorphic rounded-lg p-6 w-full max-w-md">
        <div class="flex flex-col items-center justify-center mb-4">
            <img src="https://picsum.photos/200/150" alt="Portfolio Item" class="rounded-lg mb-2 shadow-neumorphic">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Portfolio Item Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the portfolio item goes here. It showcases the work done and highlights key features.</p>
        </div>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-neumorphic">
            <span class="ml-2 text-gray-800 dark:text-gray-200">John Doe</span>
        </div>
        <div class="mt-4">
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline transition ease-in-out duration-200">View Details</a>
        </div>
    </div>
</div>

<style>
    .shadow-neumorphic {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3),
                    -8px -8px 15px rgba(255, 255, 255, 0.5);
    }
</style>

Verwandte Komponenten

Social-Media-Container

Eine reaktionsschnelle Container-Komponente mit lebendigen Farben, ansprechenden Mikrointeraktionen und Unterstützung für dunkle Themen, die sich für Social-Media-Schnittstellen eignet. Zu den Funktionen gehören subtile Hover-Effekte und ein übersichtliches Layout.

Offen

3D-Container-Komponente

Eine reaktionsschnelle Containerkomponente für Dashboards mit einem lebendigen Farbschema und 3D-Designelementen, die den Dunkelmodus unterstützt.

Offen

Container-Komponente

Eine einfache, reaktionsschnelle Container-Komponente für den Konsum von Blogs/Inhalten mit Mikrointeraktionen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen