インフォグラフィックコンポーネント
ダークテーマをサポートする Tailwind CSS を使用してスキューモーフィックスタイルでデザインされたレスポンシブインフォグラフィックコンポーネント。現実世界の要素を模倣して、情報を視覚的に表示します。
HTMLコード
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 w-full max-w-4xl">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/id/1011/400/300" alt="Infographic 1" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description and details about the first metric displayed in a visually appealing way.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/id/1012/400/300" alt="Infographic 2" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description and details about the second metric, designed to be intuitive.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/id/1013/400/300" alt="Infographic 3" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 3</h3>
<p class="text-gray-600 dark:text-gray-400">Insights and information about the third metric, presented in an engaging manner.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/id/1014/400/300" alt="Infographic 4" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 4</h3>
<p class="text-gray-600 dark:text-gray-400">Detailed information about the fourth metric, with a visual twist.</p>
</div>
</div>
</div>
</div>関連コンポーネント
RetroInfographicsコンポーネント
レトロ/ビンテージデザイン、パステルカラースキーム、ダークモードをサポートするレスポンシブインフォグラフィックコンポーネント。スタイリングにTailwind CSSを使用し、ブログやコンテンツの使用に適した複雑なインターフェイス用の複数のインタラクティブ要素が含まれています。タイムライン、プログレスバー、チャート、コールトゥアクションが含まれており、すべて80年代/90年代の美学とパステルカラーでスタイリングされています。picsum.photosからのランダムな画像を使用し、アバターに randomuser.me します。
インフォグラフィックコンポーネント
Skeuomorphismデザインスタイルと鮮やかな配色を備えた複雑なインフォグラフィックコンポーネントで、eコマースプラットフォームに適しています。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。インタラクティブな要素を使用して、さまざまな製品統計を表示します。