Brutalist_Infographics_Component_Earth_Tones
ブルータリズムにインスパイアされたビジネス/企業Webサイト向けのインフォグラフィックコンポーネントで、生のタイポグラフィ、ハイコントラスト、アースカラーが特徴です。応答性が高く、ダークモードをサポートしています。
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>関連コンポーネント
インフォグラフィックコンポーネント
Skeuomorphismデザインスタイルと鮮やかな配色を備えた複雑なインフォグラフィックコンポーネントで、eコマースプラットフォームに適しています。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。インタラクティブな要素を使用して、さまざまな製品統計を表示します。
インフォグラフィックコンポーネント
Tailwind CSS を使用して作成された、ダークテーマのサポートによりユーザーのアクションに応答する小さくて魅力的なアニメーションを特徴とするレスポンシブ インフォグラフィック コンポーネント。
インフォグラフィックコンポーネント
ダークテーマをサポートする Tailwind CSS を使用してスキューモーフィックスタイルでデザインされたレスポンシブインフォグラフィックコンポーネント。現実世界の要素を模倣して、情報を視覚的に表示します。