Dashboards Component
A simple, monochromatic dark mode dashboard component for portfolios, built with Tailwind CSS. It features a responsive design and uses different shades of a single color for a sleek, minimalist look.
HTML Code
<div class="min-h-screen bg-gray-900 text-gray-100 p-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl font-bold mb-8 text-gray-500">Dashboard</h1>
<!-- Stats Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-400">Projects Completed</h2>
<p class="text-5xl font-bold text-gray-300 mt-2">42</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-400">Clients</h2>
<p class="text-5xl font-bold text-gray-300 mt-2">15</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-400">Awards</h2>
<p class="text-5xl font-bold text-gray-300 mt-2">3</p>
</div>
</div>
<!-- Recent Work Section -->
<div class="bg-gray-800 p-8 rounded-lg shadow-lg mb-12">
<h2 class="text-3xl font-semibold text-gray-400 mb-6">Recent Work</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img src="https://picsum.photos/seed/project1/400/250" alt="Project 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-300">Project Alpha</h3>
<p class="text-gray-400 mt-2">A sleek web design for a tech startup.</p>
</div>
</div>
<div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img src="https://picsum.photos/seed/project2/400/250" alt="Project 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-300">Project Beta</h3>
<p class="text-gray-400 mt-2">Mobile app development for an e-commerce brand.</p>
</div>
</div>
<div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img src="https://picsum.photos/seed/project3/400/250" alt="Project 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-300">Project Gamma</h3>
<p class="text-gray-400 mt-2">Branding and logo design for a local business.</p>
</div>
</div>
</div>
</div>
<!-- Testimonials Section -->
<div class="bg-gray-800 p-8 rounded-lg shadow-lg">
<h2 class="text-3xl font-semibold text-gray-400 mb-6">Testimonials</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gray-700 p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client 1" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-semibold text-gray-300">John Doe</p>
<p class="text-sm text-gray-400">CEO, Tech Solutions</p>
</div>
</div>
<p class="text-gray-400 italic">"The work delivered was exceptional and exceeded our expectations. Highly recommend!"</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client 2" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-semibold text-gray-300">Jane Smith</p>
<p class="text-sm text-gray-400">Marketing Director, Global Corp</p>
</div>
</div>
<p class="text-gray-400 italic">"Professional, timely, and truly understood our vision. A pleasure to work with."</p>
</div>
</div>
</div>
</div>
</div>Related Components
Art Deco Social Dashboard
A moderate complexity dashboard component for dating/social platforms, featuring an Art Deco design style with muted/desaturated colors and full responsiveness. Includes profile cards, activity feed, and navigation, with dark mode support.
Luxury Agriculture Dashboard Component
An elegant and sophisticated dashboard component for agriculture and farming websites, featuring a black and white color scheme with a vibrant emerald accent. It includes key metrics, recent activities, and interactive elements, designed to be fully responsive and support dark mode.
Dashboards Component
Dashboards Component with Neumorphism design, responsive effects, and dark theme support.