In this tutorial we will create admin dashboard Statistics Cards UI using Tailwind CSS.
Design a Simple dashboard Statistics Cards UI using Tailwind CSS
Build a responsive dashboard with Statistics Cards UI using the Tailwind CSS grid class. Design cards for User, Revenue, and Orders to display key information.
<div class="bg-gray-100 h-screen flex items-center justify-center">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Users Card -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-800">Users</h2>
<p class="text-3xl font-bold text-indigo-500 mt-2">1,234</p>
</div>
<!-- Revenue Card -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-800">Revenue</h2>
<p class="text-3xl font-bold text-green-500 mt-2">$50,000</p>
</div>
<!-- Orders Card -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-800">Orders</h2>
<p class="text-3xl font-bold text-blue-500 mt-2">500</p>
</div>
</div>
</div>
dashboard statistics cards ui tailwind css
Build a dashboard Statistics Sales and Productivity Cards Using Tailwind CSS
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Sales Card -->
<div class="bg-blue-500 p-6 rounded-lg shadow-md text-white">
<h2 class="text-lg font-semibold">Sales</h2>
<p class="text-3xl font-bold mt-2">$75,000</p>
<div class="flex items-center mt-4">
<span class="text-sm">+15% from last month</span>
</div>
</div>
<!-- Productivity Card -->
<div class="bg-green-500 p-6 rounded-lg shadow-md text-white">
<h2 class="text-lg font-semibold">Productivity</h2>
<p class="text-3xl font-bold mt-2">89%</p>
<div class="flex items-center mt-4">
<span class="text-sm">Efficiency is up by 5%</span>
</div>
</div>
<!-- Orders Card -->
<div class="bg-gray-500 p-6 rounded-lg shadow-md text-white">
<h2 class="text-lg font-semibold">Orders</h2>
<p class="text-3xl font-bold mt-2">12%</p>
<div class="flex items-center mt-4">
<span class="text-sm">Up to 5%</span>
</div>
</div>
</div>
tailwind dashboard statistics cards
Create Admin Dashboard Statistics Social Media Engagement Cards Using Tailwind CSS
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Facebook Card -->
<div class="bg-blue-600 p-6 rounded-lg shadow-md text-white">
<h2 class="text-lg font-semibold">Facebook</h2>
<p class="text-3xl font-bold mt-2">12,345</p>
<div class="flex items-center mt-4">
<span class="text-sm">+8% engagement</span>
</div>
</div>
<!-- Twitter Card -->
<div class="bg-blue-400 p-6 rounded-lg shadow-md text-white">
<h2 class="text-lg font-semibold">Twitter</h2>
<p class="text-3xl font-bold mt-2">9,876</p>
<div class="flex items-center mt-4">
<span class="text-sm">-5% engagement</span>
</div>
</div>
<!-- Instagram Card -->
<div class="bg-pink-500 p-6 rounded-lg shadow-md text-white">
<h2 class="text-lg font-semibold">Instagram</h2>
<p class="text-3xl font-bold mt-2">25,678</p>
<div class="flex items-center mt-4">
<span class="text-sm">+12% engagement</span>
</div>
</div>
</div>
tailwind css admin statistics cards
Stylish Dashboard Statistics Cards with gradient colors and icons using Tailwind CSS
<div class="bg-gray-100 h-screen flex items-center justify-center">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Project Completion Card -->
<div class="bg-gradient-to-r from-purple-600 to-pink-500 p-6 rounded-lg shadow-lg text-white">
<div class="flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold">Project Completion</h2>
<p class="text-3xl font-bold mt-2">85%</p>
</div>
<div class="bg-white p-3 rounded-full">
<svg class="text-pink-500 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<div class="mt-4">
<span class="text-sm">Great progress! Keep up the good work.</span>
</div>
</div>
<!-- Health Tracker Card -->
<div class="bg-gradient-to-br from-green-500 to-blue-500 p-6 rounded-lg shadow-lg text-white">
<div class="flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold">Steps</h2>
<p class="text-3xl font-bold mt-2">10,234</p>
</div>
<div class="bg-white p-3 rounded-full">
<svg class="text-blue-500 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<div class="mt-4">
<span class="text-sm">Keep moving! You're doing great.</span>
</div>
</div>
<!-- Performance Card -->
<div class="bg-gradient-to-r from-blue-500 to-blue-700 p-6 rounded-lg shadow-lg text-white">
<div class="flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold">Performance</h2>
<p class="text-3xl font-bold mt-2">92%</p>
</div>
<div class="bg-white p-3 rounded-full">
<svg class="text-blue-700 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<div class="mt-4">
<span class="text-sm">Overall system performance</span>
</div>
</div>
</div>
</div>
tailwind css statistics cards with icon
Neo-Brutalist Dashboard Statistics Cards Style using Tailwind CSS
Create a Neobrutalism UI Card Using Tailwind CSS
<div class="bg-gray-800 h-screen flex items-center justify-center">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-3xl">
<!-- Card 1 -->
<div class="bg-gray-700 p-6 rounded-lg shadow-md text-white border-2 border-gray-600">
<div class="flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold">Data Analysis</h2>
<p class="text-3xl font-bold mt-2">64%</p>
</div>
<div class="bg-gray-500 p-3 rounded-full">
<svg class="text-white h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<div class="mt-4">
<span class="text-sm">Raw data insights for decision-making.</span>
</div>
</div>
<!-- Card 2 -->
<div class="bg-gray-700 p-6 rounded-lg shadow-md text-white border-2 border-gray-600">
<div class="flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold">User Analytics</h2>
<p class="text-3xl font-bold mt-2">2,345</p>
</div>
<div class="bg-gray-500 p-3 rounded-full">
<svg class="text-white h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<div class="mt-4">
<span class="text-sm">Understanding user behavior patterns.</span>
</div>
</div>
<!-- Card 3 -->
<div class="bg-gray-700 p-6 rounded-lg shadow-md text-white border-2 border-gray-600">
<div class="flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold">System Logs</h2>
<p class="text-3xl font-bold mt-2">1,200</p>
</div>
<div class="bg-gray-500 p-3 rounded-full">
<svg class="text-white h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<div class="mt-4">
<span class="text-sm">System activities and error tracking.</span>
</div>
</div>
</div>
</div>
tailwind css neo-brutalist statistics cards
