Componente de infografía
Componente de infografía con estilo brutalismo, alto contraste, diseño inusual, responsivo con soporte de modo oscuro usando viento de cola css
Código 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>
Componentes relacionados
Componente de infografía
Un componente de infografía receptivo con elementos de diseño 3D, combinación de colores pastel y complejidad moderada para tableros, con soporte para modo oscuro. Sin JavaScript, solo HTML con Tailwind CSS.
Componente de infografía retro vintage
Un componente de tablero de infografías de redes sociales receptivo, de color pastel, de estilo retro / vintage construido con Tailwind CSS, con estadísticas de perfil de usuario, gráfico de barras de hashtags de tendencia y una imagen ilustrativa. Incluye soporte para el modo oscuro a través del prefijo dark: de Tailwind y animaciones interactivas de desplazamiento (no se requiere JavaScript).
Componente de infografía
Un componente de infografía complejo con un estilo de diseño Skeuomorphism y una combinación de colores vibrantes, adecuado para plataformas de comercio electrónico. Es responsivo y admite el modo oscuro usando Tailwind CSS. Muestra varias estadísticas de productos con elementos interactivos.