Infographics Component
Infographics Component with Neumorphism style, Grayscale color scheme, Simple layout, for Dashboard purpose, Responsive with Dark Theme support
HTML Code
<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>Related Components
Infographics Component
A neumorphic infographics component with earth tones inspired by soil, trees, and landscapes. It features a soft UI style with moderate complexity for business/corporate use. The design is responsive and supports dark themes using Tailwind CSS.
RetroInfographicsComponent
A responsive infographics component with a retro/vintage design, pastel color scheme, and dark mode support. Uses Tailwind CSS for styling and includes multiple interactive elements for a complex interface suitable for blogs and content consumption. Includes a timeline, progress bars, charts, and a call to action, all styled with 80s/90s aesthetics and pastel colors. Uses random images from picsum.photos and randomuser.me for avatars.
Infographics Component
A minimalist infographics component featuring clean spaces and minimal elements, support for responsive design and dark theme.