HTML 代码
<section class="bg-white dark:bg-stone-900 text-stone-900 dark:text-white p-8 sm:p-12 md:p-16 lg:p-20 font-mono">
<div class="container mx-auto">
<h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-12 uppercase border-b-8 border-stone-900 dark:border-white pb-4">Infographic Insights</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
<h3 class="text-2xl font-bold mb-4 uppercase">Data Point 1</h3>
<p class="text-lg mb-4">Quis at aute sint partem non, sed literis minim ea.</p>
<div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">123</div>
</div>
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
<h3 class="text-2xl font-bold mb-4 uppercase">Data Point 2</h3>
<p class="text-lg mb-4">Esse cillum fore consequat, nam magna tempor a fore quam.</p>
<div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">45%</div>
</div>
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
<h3 class="text-2xl font-bold mb-4 uppercase">Data Point 3</h3>
<p class="text-lg mb-4">Do eu lorem ne nescius, ex ut laboris constructio.</p>
<div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">$999</div>
</div>
</div>
<div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white flex items-center transform transition-transform duration-300 hover:rotate-2">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-16 h-16 rounded-none mr-6 border-4 border-stone-900 dark:border-white">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Key Stat with Image</h3>
<p class="text-lg">Non pariatur quae ne amet, admodum non expetendis.</p>
<div class="text-5xl font-bold text-left text-red-700 dark:text-yellow-400 mt-4">7890</div>
</div>
</div>
<div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:-rotate-2">
<h3 class="text-2xl font-bold mb-4 uppercase">Image Highlight</h3>
<img src="https://picsum.photos/id/237/400/250" alt="Placeholder Image" class="w-full h-64 object-cover border-4 border-stone-900 dark:border-white mb-4">
<p class="text-lg">Id sint singulis aut ullamco. lorem nescius aut cupidatat.</p>
</div>
</div>
<div class="mt-12 bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white overflow-x-auto">
<h3 class="text-2xl font-bold mb-4 uppercase">Scrolling Data</h3>
<div class="flex space-x-8">
<div class="flex-none w-64">
<div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">1024</div>
<p class="text-lg">Specific insight one</p>
</div>
<div class="flex-none w-64">
<div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">2048</div>
<p class="text-lg">Specific insight two</p>
</div>
<div class="flex-none w-64">
<div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">4096</div>
<p class="text-lg">Specific insight three</p>
</div>
<div class="flex-none w-64">
<div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">8192</div>
<p class="text-lg">Specific insight four</p>
</div>
</div>
</div>
</div>
</section>
相关组件
复古复古信息图表组件
一个响应式、柔和的色彩、复古/复古风格的社交媒体信息图表组件，使用 Tailwind CSS 构建，具有用户资料统计信息、趋势井号标签条形图和说明性图像。包括通过 Tailwind 的 dark： 前缀和交互式悬停动画（无需 JavaScript）的深色模式支持。