Composant Infographie
Composant d’infographie avec style brutalisme, contraste élevé, mise en page inhabituelle, réactif avec prise en charge du mode sombre à l’aide de tailwind css
HTML Code
<section class="bg-white dark:bg-stone-900 text-stone-900 dark:text-white p-8 sm:p-12 md:p-16 lg:p-20 font-mono">
<div class="container mx-auto">
<h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-12 uppercase border-b-8 border-stone-900 dark:border-white pb-4">Infographic Insights</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
<h3 class="text-2xl font-bold mb-4 uppercase">Data Point 1</h3>
<p class="text-lg mb-4">Quis at aute sint partem non, sed literis minim ea.</p>
<div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">123</div>
</div>
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
<h3 class="text-2xl font-bold mb-4 uppercase">Data Point 2</h3>
<p class="text-lg mb-4">Esse cillum fore consequat, nam magna tempor a fore quam.</p>
<div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">45%</div>
</div>
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
<h3 class="text-2xl font-bold mb-4 uppercase">Data Point 3</h3>
<p class="text-lg mb-4">Do eu lorem ne nescius, ex ut laboris constructio.</p>
<div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">$999</div>
</div>
</div>
<div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white flex items-center transform transition-transform duration-300 hover:rotate-2">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-16 h-16 rounded-none mr-6 border-4 border-stone-900 dark:border-white">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Key Stat with Image</h3>
<p class="text-lg">Non pariatur quae ne amet, admodum non expetendis.</p>
<div class="text-5xl font-bold text-left text-red-700 dark:text-yellow-400 mt-4">7890</div>
</div>
</div>
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:-rotate-2">
<h3 class="text-2xl font-bold mb-4 uppercase">Image Highlight</h3>
<img src="https://picsum.photos/id/237/400/250" alt="Placeholder Image" class="w-full h-64 object-cover border-4 border-stone-900 dark:border-white mb-4">
<p class="text-lg">Id sint singulis aut ullamco. lorem nescius aut cupidatat.</p>
</div>
</div>
<div class="mt-12 bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white overflow-x-auto">
<h3 class="text-2xl font-bold mb-4 uppercase">Scrolling Data</h3>
<div class="flex space-x-8">
<div class="flex-none w-64">
<div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">1024</div>
<p class="text-lg">Specific insight one</p>
</div>
<div class="flex-none w-64">
<div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">2048</div>
<p class="text-lg">Specific insight two</p>
</div>
<div class="flex-none w-64">
<div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">4096</div>
<p class="text-lg">Specific insight three</p>
</div>
<div class="flex-none w-64">
<div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">8192</div>
<p class="text-lg">Specific insight four</p>
</div>
</div>
</div>
</div>
</section>
Composants associés
Composant Infographie
Un composant d’infographie simple conçu avec une esthétique 3D, utilisant des couleurs pastel pour les interfaces de médias sociaux, avec prise en charge du mode sombre.
RetroInfographicsComposant
Un composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs pastel et une prise en charge du mode sombre. Utilise Tailwind CSS pour le style et comprend plusieurs éléments interactifs pour une interface complexe adaptée aux blogs et à la consommation de contenu. Comprend une chronologie, des barres de progression, des graphiques et un appel à l’action, le tout avec une esthétique des années 80/90 et des couleurs pastel. Utilise des images aléatoires de picsum.photos et randomuser.me pour les avatars.
Composant Infographie
Un composant d’infographie conçu avec skeuomorphism, avec des effets réactifs et la prise en charge des thèmes sombres, à l’aide de Tailwind CSS.