Infografik-Komponente
Eine minimalistische Infografik-Komponente mit sauberen Räumen und minimalen Elementen, Unterstützung für responsives Design und dunkles Thema.
HTML-Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
</div>
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
</div>
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
</div>
</div>
<div class="mt-6 border-t pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
</div>
</div>
</div>Verwandte Komponenten
Infografik-Komponente
Eine reaktionsschnelle Infografik-Komponente mit ansprechenden Mikrointeraktionen und Unterstützung für dunkle Themen mit Tailwind CSS.
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.
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.