Brutalist_Infographics_Component_Earth_Tones
Un composant graphique d’inspiration brutaliste pour les sites Web d’entreprise, avec une typographie brute, un contraste élevé et des tons de terre. Il est réactif et prend en charge le mode sombre.
HTML Code
<section class="bg-stone-200 dark:bg-stone-900 py-16 md:py-24 font-mono text-stone-800 dark:text-stone-300">
<div class="container mx-auto px-6 max-w-7xl">
<h1 class="text-4xl sm:text-5xl md:text-6xl uppercase font-extrabold mb-8 md:mb-12 text-center transform -skew-x-6 inline-block bg-stone-700 text-stone-100 dark:bg-stone-300 dark:text-stone-900 p-2 leading-none mx-auto block w-fit shadow-lg">
Our <span class="text-amber-400 dark:text-lime-700">Impact</span>
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10">
<!-- Infographic Card 1 -->
<div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
<div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
+25%
</div>
<h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
Revenue Growth
</h3>
<p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
Achieved significant year-over-year revenue growth through strategic market expansion.
</p>
<a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
See Details →
</a>
</div>
<!-- Infographic Card 2 -->
<div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
<div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
420k+
</div>
<h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
Users Engaged
</h3>
<p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
Expanded our user base with innovative features and compelling content.
</p>
<a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
Explore Community →
</a>
</div>
<!-- Infographic Card 3 -->
<div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
<div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
85%+
</div>
<h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
Customer Sat.
</h3>
<p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
Maintained high customer satisfaction scores through dedicated support.
</p>
<a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
Read Testimonials →
</a>
</div>
<!-- Infographic Card 4 -->
<div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
<div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
Globally
</div>
<h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
Present in 12+
</h3>
<p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
Expanded our reach across multiple continents with localized solutions.
</p>
<a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
View Locations →
</a>
</div>
</div>
</div>
</section>Composants associés
Composant Infographie
Un composant infographique neumorphe avec des tons de terre inspirés du sol, des arbres et des paysages. Il présente un style d’interface utilisateur souple avec une complexité modérée pour une utilisation professionnelle/d’entreprise. Le design est réactif et prend en charge les thèmes sombres à l’aide de Tailwind CSS.
Composant Infographie
Un composant d’infographie réactif avec de petites animations attrayantes qui répondent aux actions de l’utilisateur avec la prise en charge du thème sombre, créé à l’aide de Tailwind CSS.
Composant Infographie
Composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs monochromatiques et une prise en charge du thème sombre pour les sites Web d’entreprise.