CCHub Logo CCHub Tailwind Collection
Komponenten Infografiken Infografik-Komponente

Infografik-Komponente

Eine reaktionsschnelle 3D-Infografik-Komponente, die für Social-Media-Schnittstellen mit lebendigen Farben und Unterstützung für dunkle Themen entwickelt wurde und dreidimensionale Elemente für Tiefe und Engagement enthält.

Vorschau

HTML-Code 

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="text-center mb-4">
        <h2 class="text-3xl font-bold">Infographic Title</h2>
        <p class="text-gray-400">Engaging insights and data visualizations</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"> 
            <h3 class="font-semibold text-xl">Key Insight #1</h3>
            <img src="https://picsum.photos/id/1018/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the first key insight go here. It should be engaging and informative.</p>
        </div>
        <div class="bg-gradient-to-r from-green-400 to-teal-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
            <h3 class="font-semibold text-xl">Key Insight #2</h3>
            <img src="https://picsum.photos/id/1015/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the second key insight go here. Make it intriguing!</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Join the Conversation</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <input type="text" placeholder="Share your thoughts..." class="bg-gray-700 text-white rounded-full py-2 px-4 w-full" />
        </div>
        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full inline-flex items-center">Submit</button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 {
        background-color: #1c1c1c;
    }
    .bg-gradient-to-r {
        background-image: linear-gradient(to right, #6a0dad, #1e90ff);
    }
}
</style>

Verwandte Komponenten

Retro Vintage Infografik-Komponente

Eine reaktionsschnelle, pastellfarbene Social-Media-Infografik-Dashboard-Komponente im Retro-/Vintage-Stil, die mit Tailwind CSS erstellt wurde und Benutzerprofilstatistiken, ein trendiges Hashtag-Balkendiagramm und ein illustratives Bild enthält. Enthält Unterstützung für den Dunkelmodus über das Dark:-Präfix von Tailwind und interaktive Hover-Animationen (kein JavaScript erforderlich).

Offen

3D_Grayscale_Infographics_Component

Eine reaktionsschnelle, 3D-inspirierte Graustufen-Infografik-Komponente für den Konsum von Blogs und Inhalten mit Tiefe und Engagement. Enthält Unterstützung für den Dunkelmodus.

Offen

Infografik-Komponente

Eine komplexe, reaktionsschnelle Infografik-Komponente für Unternehmenswebsites, die mit einem Skeuomorphismus-Stil und einem lebendigen Farbschema unter Verwendung von Tailwind CSS gestaltet wurde. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

Offen