组件 信息图表 Brutalist_Infographics_Component_Earth_Tones

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 CSS 构建,具有用户资料统计信息、趋势井号标签条形图和说明性图像。包括通过 Tailwind 的 dark: 前缀和交互式悬停动画(无需 JavaScript)的深色模式支持。

打开