Componente de infografía
Componente de infografía con estilo de neumorfismo, combinación de colores en escala de grises, diseño simple, para fines de tablero, responsivo con soporte de tema oscuro
Código HTML
<div class="p-4 md:p-8 bg-gray-200 dark:bg-gray-800 antialiased font-sans">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="text-gray-700 dark:text-gray-300 mb-4">
<h3 class="text-lg font-semibold mb-2">Total Users</h3>
<p class="text-3xl font-bold">15,250</p>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>Since last month</span>
<span class="text-green-500 dark:text-green-400">+ 5.2%</span>
</div>
</div>
<!-- Card 2 -->
<div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="text-gray-700 dark:text-gray-300 mb-4">
<h3 class="text-lg font-semibold mb-2">Revenue</h3>
<p class="text-3xl font-bold">$150,000</p>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>Since last month</span>
<span class="text-green-500 dark:text-green-400">+ 8.1%</span>
</div>
</div>
<!-- Card 3 -->
<div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="text-gray-700 dark:text-gray-300 mb-4">
<h3 class="text-lg font-semibold mb-2">New Orders</h3>
<p class="text-3xl font-bold">750</p>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>Since last month</span>
<span class="text-red-500 dark:text-red-400">- 2.5%</span>
</div>
</div>
</div>
<!-- Include custom shadow styles for Neumorphism -->
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #444444, -7px -7px 15px #666666;
}
</style>
</div>Componentes relacionados
Infografía de citas esqueuomórficas
Un componente infográfico complejo y receptivo diseñado para plataformas de citas/sociales con un estilo skeuomórfico y una combinación de colores sepia/marrón, con múltiples elementos interactivos y compatibilidad con el modo oscuro.
Memphis_Muted_Infographics_Component_Government
Un componente de infografía para el gobierno/servicios públicos, inspirado en el diseño de Memphis con un esquema de color apagado/desaturado. Presenta geometrías audaces, patrones divertidos y un diseño receptivo con soporte para modo oscuro. Muestra estadísticas e información clave visualmente.
Componente de infografía
Un componente infográfico simple diseñado con estilo Neumorfismo y una combinación de colores Pastel. Muestra una tarjeta de perfil y estadísticas básicas en un diseño visualmente atractivo adecuado para sitios web comerciales o corporativos.