Komponenten Infografiken Infografik-Komponente

Infografik-Komponente

Eine Infografik-Komponente, die mit Skeuomorphismus entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen, unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md"> 
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Section Title</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a description of this section. It mimics a real-world interface.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md"> 
            <img src="https://picsum.photos/200/101" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Another Section</h3>
            <p class="text-gray-600 dark:text-gray-300">Details about this section are displayed here, using a real-world inspired design.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-6">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="ml-2 text-gray-800 dark:text-gray-200 font-medium">User Name</span>
        </div>
        <span class="text-gray-600 dark:text-gray-300">3 hours ago</span>
    </div>
</div>

Verwandte Komponenten

Infografik-Komponente

Eine einfache, reaktionsschnelle Infografik-Komponente für Kryptowährungs-/Blockchain-Anwendungen mit einer Benutzeroberfläche im Dunkelmodus und einer Wald-/Grün-Farbpalette. Zeigt wichtige Metriken wie Gesamttransaktionen, tägliches Volumen und aktive Benutzer an.

Offen

RetroInfografikenKomponente

Eine reaktionsschnelle Infografik-Komponente mit Retro-/Vintage-Design, pastellfarbenem Farbschema und Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS für das Styling und enthält mehrere interaktive Elemente für eine komplexe Benutzeroberfläche, die für Blogs und den Konsum von Inhalten geeignet ist. Enthält eine Zeitleiste, Fortschrittsbalken, Diagramme und einen Call-to-Action, alles im Stil der 80er/90er Jahre und Pastellfarben. Verwendet zufällige Bilder von picsum.photos und randomuser.me für Avatare.

Offen

Infografik-Komponente - Gaming Legacy Stats

Eine einfache, reaktionsschnelle Infografik-Komponente für Gaming-Websites mit Spielerstatistiken mit einer Luxus-/Premium-, Retro-/Vintage-Ästhetik. Unterstützt den Dunkelmodus.

Offen