CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten für die Inhaltsanzeige Pastel3DBlogContentCard

Pastel3DBlogContentCard

Eine responsive Content Display Component für Blogs oder Content-Bereiche, die mit Tailwind CSS erstellt wurde. Es verfügt über ein einfaches Layout mit einer 3D-inspirierten Ästhetik mit Schatten und Hover-Effekten. Das Farbschema ist weiches Pastell für den hellen Modus mit einem kompatiblen Dark-Mode-Design. Die Komponente enthält ein Bild, einen Titel, Metadaten (Autor/Datum), einen Auszug und eine Schaltfläche "Weiterlesen". Platzhalterbilder werden von picsum.photos und randomuser.me verwendet.

Vorschau

HTML-Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pastel 3D Blog Content Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // You can define specific pastel colors here if needed,
                        // but for this example, we primarily use Tailwind's default palette
                        // that offers pastel-like shades (e.g., sky-50, sky-100, sky-200).
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-sky-50 dark:bg-slate-900 font-sans">

    <div class="min-h-screen flex flex-col justify-center items-center p-4 sm:p-8">
        <div class="text-center mb-8">
            <h1 class="text-3xl sm:text-4xl font-bold text-slate-800 dark:text-white">Content Display Component</h1>
            <p class="text-slate-600 dark:text-slate-400">3D Design, Pastel Colors, Simple Complexity</p>
        </div>

        <article class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-out max-w-2xl w-full group">
            <!-- Image Section -->
            <div class="relative aspect-video overflow-hidden">
                <img src="https://picsum.photos/seed/contentcard3d/800/450" alt="Abstract tech background" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent"></div>
            </div>

            <!-- Content Section -->
            <div class="p-6 sm:p-8">
                <!-- Title -->
                <h2 class="text-2xl sm:text-3xl font-bold text-sky-600 dark:text-sky-300 mb-3 group-hover:text-sky-500 dark:group-hover:text-sky-200 transition-colors duration-300">
                    Exploring the Depths of 3D Web Design
                </h2>

                <!-- Meta Information -->
                <div class=

Verwandte Komponenten

Art-Déco-Komponente für die Anzeige von Inhalten

Eine komplexe, reaktionsschnelle, vom Art Deco inspirierte Inhaltsanzeigekomponente für Geschäfts-/Unternehmenswebsites mit geometrischen Mustern, satten Juwelentönen und Unterstützung für den Dunkelmodus. Enthält mehrere Abschnitte für Funktionen, Erfahrungsberichte und Handlungsaufforderungen.

Offen

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

Immobilienkarte - Schweizer Pastell

Eine einfache, saubere und reaktionsschnelle Immobilieninseratskarte mit einem schweizerischen/internationalen Typografiestil und einem pastellfarbenen Farbschema, geeignet für Immobilienplattformen. Inklusive Unterstützung für den Dunkelmodus.

Offen