Infografik-Komponente
Eine neumorphe Infografik-Komponente mit Erdtönen, die von Erde, Bäumen und Landschaften inspiriert sind. Es verfügt über einen weichen UI-Stil mit moderater Komplexität für den Business-/Corporate-Gebrauch. Das Design ist responsive und unterstützt dunkle Designs mit Tailwind CSS.
HTML-Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md relative overflow-hidden">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Business Overview</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">An overview of the current business landscape and insights into market trends.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Sales Data</h3>
<img src="https://picsum.photos/200/100" alt="Sales Data Image" class="rounded-lg my-2">
<p class="text-gray-600 dark:text-gray-400">Current month sales: 2500 units</p>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Customer Growth</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Customer Growth Image" class="rounded-lg my-2">
<p class="text-gray-600 dark:text-gray-400">Growth rate: 15% YoY</p>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Market Trends</h3>
<img src="https://picsum.photos/200/100?random=2" alt="Market Trends Image" class="rounded-lg my-2">
<p class="text-gray-600 dark:text-gray-400">Emerging trends in the industry.</p>
</div>
</div>
<div class="mt-6">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">Team Members</h4>
<div class="flex space-x-4 mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
</div>
</div>
</div>Verwandte Komponenten
Skeuomorphe Dating-Infografik
Eine komplexe, reaktionsschnelle Infografik-Komponente, die für Dating-/Social-Media-Plattformen mit einem skeuomorphen Stil und einem sepia/braunen Farbschema entwickelt wurde, mit mehreren interaktiven Elementen und Unterstützung für den Dunkelmodus.
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.
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.