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

Komponente "Komponenten für die Inhaltsanzeige"

Eine einfache und lebendige Komponente zur Anzeige von Inhalten mit Mikrointeraktionen, responsivem Design und Unterstützung für dunkle Themen, die sich für Blogs und den Konsum von Inhalten eignet. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen

Retro Social Media Postkarte

Eine reaktionsschnelle Social-Media-Postkartenkomponente mit einer Retro-/Vintage-Ästhetik der 80er/90er Jahre, die ein analoges Farbschema (Sky, Teal, Purple) mit fuchsiafarbenen Akzenten verwendet. Bietet Unterstützung für den Dunkelmodus und interaktive Hover-Effekte. Zu den Inhalten gehören der Benutzeravatar, der Benutzername, der Zeitstempel, der Textbeitrag, das Bild und die Aktionsschaltflächen (Gefällt mir, Kommentieren, Teilen). Erstellt mit Tailwind CSS.

Offen

Komponente "Inhaltsanzeige"

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

Offen