Brutalist_Infographics_Component_Earth_Tones
适用于商业/公司网站的野兽派风格信息图表组件,具有原始排版、高对比度和大地色调。它响应迅速并支持深色模式。
HTML 代码
<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>
相关组件
信息图表组件
一种仿生信息图组件,使用土壤、树木和自然景观所启发的土色调。它具有温和的用户界面风格,复杂度适中,专为商业/企业使用设计。该设计为响应式,并支持使用Tailwind CSS的暗黑主题。
复古复古信息图表组件
一个响应式、柔和的色彩、复古/复古风格的社交媒体信息图表组件,使用 Tailwind CSS 构建,具有用户资料统计信息、趋势井号标签条形图和说明性图像。包括通过 Tailwind 的 dark: 前缀和交互式悬停动画(无需 JavaScript)的深色模式支持。