Search Components

Dashboards

Visual display of key performance indicators

Memphis Sepia Dashboard

A dashboard component with a Memphis Design aesthetic, featuring bold geometric shapes and a warm sepia/brown color palette, suitable for business and corporate websites. Includes full responsiveness and dark mode support.

Open Preview

                <div class="min-h-screen bg-amber-50 dark:bg-stone-900 font-sans p-4 sm:p-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

        <!-- Header Section -->
        <div class="md:col-span-3 lg:col-span-4 bg-amber-200 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2"></div>
            <div class="absolute bottom-0 right-0 w-24 h-24 bg-stone-500 dark:bg-stone-800 transform -rotate-45 translate-x-1/3 translate-y-1/3"></div>
            <div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
                <div>
                    <h1 class="text-3xl sm:text-4xl font-extrabold text-stone-800 dark:text-amber-50 mb-2">Welcome, Marketing Team!</h1>
                    <p class="text-stone-700 dark:text-amber-100 text-lg">Here's your dashboard overview for today.</p>
                </div>
                <div class="mt-4 sm:mt-0">
                    <button class="px-6 py-3 bg-stone-800 dark:bg-amber-50 text-amber-50 dark:text-stone-800 rounded-full font-semibold shadow-md hover:bg-stone-700 dark:hover:bg-amber-100 transition duration-300 relative overflow-hidden group">
                        <span class="relative z-10">New Report</span>
                        <div class="absolute inset-0 bg-stone-900 dark:bg-amber-100 transform -skew-x-12 scale-0 group-hover:scale-100 transition-transform duration-300 origin-left"></div>
                    </button>
                </div>
            </div>
        </div>

        <!-- Card 1: Sales Overview -->
        <div class="bg-amber-300 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-6 -right-8 w-24 h-24 bg-stone-500 dark:bg-amber-700 rounded-full"></div>
            <div class="absolute bottom-2 -left-6 w-32 h-16 bg-amber-400 dark:bg-stone-800 transform skew-y-6"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Total Sales</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$12,450</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+5.2% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 2: New Customers -->
        <div class="bg-stone-400 dark:bg-amber-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-24 h-24 bg-amber-500 dark:bg-stone-900 transform rotate-12 -translate-x-1/4 -translate-y-1/4"></div>
            <div class="absolute bottom-0 right-0 w-16 h-16 bg-stone-700 dark:bg-amber-500 rounded-full"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">New Customers</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">289</p>
                <div class="flex items-center text-red-700 dark:text-red-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 010 2H9a1 1 0 01-1-1v-4a1 1 0 012 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">-1.5% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 3: Website Traffic -->
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-4 right-4 w-12 h-12 bg-amber-400 dark:bg-amber-600 transform rotate-45"></div>
            <div class="absolute bottom-0 left-0 w-16 h-16 bg-stone-500 dark:bg-stone-700 rounded-br-full"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Website Traffic</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">78,123</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+8.7% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 4: Average Order Value (smaller, for lg screens) -->
        <div class="hidden lg:block bg-amber-100 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-20 h-20 bg-stone-400 dark:bg-amber-600 transform -rotate-45 translate-x-1/3 -translate-y-1/3"></div>
            <div class="absolute bottom-0 right-0 w-16 h-16 bg-amber-500 dark:bg-stone-900 transform rotate-45 translate-x-1/4 translate-y-1/4"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Average Order</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$43.75</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+2.1% this month</span>
                </div>
            </div>
        </div>

        <!-- Large Card: Recent Activity -->
        <div class="md:col-span-2 bg-stone-300 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-12 translate-x-1/4 -translate-y-1/4"></div>
            <div class="relative z-10">
                <h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Recent Activity</h2>
                <ul class="space-y-4">
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Jane Doe</span> purchased 'Product XYZ'</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">15 minutes ago</p>
                        </div>
                    </li>
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">John Smith</span> signed up for newsletter</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">1 hour ago</p>
                        </div>
                    </li>
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Emily White</span> reviewed 'Service ABC'</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">3 hours ago</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Large Card: Quick Links -->
        <div class="md:col-span-1 lg:col-span-2 bg-amber-200 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-24 h-24 bg-stone-500 dark:bg-amber-700 transform skew-y-12 -translate-x-1/2"></div>
            <div class="absolute bottom-0 right-0 w-20 h-20 bg-amber-400 dark:bg-stone-800 rounded-tl-full"></div>
            <div class="relative z-10">
                <h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Quick Access</h2>
                <nav>
                    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 001.946.806L14.75 1.25M2 17.5V14h6v3.5l-2 2-2-2zM12 14v3.5l2 2 2-2V14h-4z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Analytics</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Messages</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM11 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Reports</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A6 6 0 0012 9a6 6 0 00-6 6zM13 13.5a2.5 2.5 0 00-5 0M9 20a1 1 0 110-2h2a1 1 0 110 2H9z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Settings</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>
</div>

Industrial_Sports_Dashboard

A moderate complexity dashboard component for sports/fitness applications with an industrial design style, featuring earth tones and responsive layout with dark mode support. Displays key metrics, recent activities, and team/individual performance.

Open Preview

                <div class="min-h-screen bg-stone-100 text-stone-800 p-4 sm:p-6 lg:p-8 dark:bg-stone-900 dark:text-stone-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Main Content Area -->
    <div class="md:col-span-2 lg:col-span-3 space-y-6">

      <!-- Header Section -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <div>
          <h1 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-100 mb-2">Team Performance Overview</h1>
          <p class="text-lg text-stone-600 dark:text-stone-400">Tracking collective progress and individual achievements.</p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-2">
          <button class="flex items-center px-4 py-2 bg-stone-700 text-white rounded-md hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:bg-stone-600 dark:hover:bg-stone-700">
            <svg class="w-5 h-5 mr-2" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
            Export Report
          </button>
          <button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-700 dark:hover:bg-amber-800">
            <svg class="w-5 h-5" 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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            New Activity
          </button>
        </div>
      </div>

      <!-- Key Metrics Section -->
      <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Total Workouts</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">1,234</p>
          <p class="text-xs text-green-600 dark:text-green-400 mt-2">+12% this month</p>
        </div>
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Avg. Intensity</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">8.5</p>
          <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2">Stable</p>
        </div>
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Team Stamina Score</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">92%</p>
          <p class="text-xs text-red-600 dark:text-red-400 mt-2">-2% since last week</p>
        </div>
      </section>

      <!-- Recent Activities Table -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-4">Recent Activities</h2>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-stone-300 dark:divide-stone-700">
            <thead class="bg-stone-300 dark:bg-stone-700">
              <tr>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Activity</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Date</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Duration</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Participants</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-stone-200 dark:divide-stone-700">
              <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Strength Training</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-20</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">1h 30m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">8 players</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
                </td>
              </tr>
              <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Sprint Drills</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-19</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">0h 45m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">5 players</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
                </td>
              </tr>
               <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Team Strategy Meeting</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-18</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2h 00m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">Full Team</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-200 text-amber-800 dark:bg-amber-700 dark:text-amber-100">Scheduled</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- Performance Graphs Section -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-4">Weekly Training Volume</h2>
        <img src="https://picsum.photos/800/300?random=1" alt="Placeholder graph for training volume" class="w-full h-auto rounded-md object-cover border border-stone-300 dark:border-stone-700">
        <p class="text-sm text-stone-600 dark:text-stone-400 mt-3">Represents total hours logged by the team each week.</p>
      </section>

    </div>

    <!-- Sidebar / Secondary Content Area -->
    <aside class="space-y-6">

      <!-- Player Spotlight Card -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Player Spotlight</h2>
        <div class="flex flex-col items-center">
          <img class="w-24 h-24 rounded-full object-cover border-4 border-stone-400 dark:border-stone-600 mb-4" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Player Avatar">
          <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-100 mb-1">Alex 'The Rocket' Smith</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-3">Position: Forward</p>
          <div class="flex items-center space-x-2 text-sm text-stone-700 dark:text-stone-300">
            <svg class="w-4 h-4 text-amber-600 dark:text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd"></path></svg>
            <span>Recent Best: 15.2 km in latest run</span>
          </div>
        </div>
      </section>

      <!-- Upcoming Events -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Upcoming Events</h2>
        <ul class="space-y-4">
          <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Nov<br>25
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Match vs. City Titans</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Arena Stadium, 7:00 PM</p>
            </div>
          </li>
          <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Dec<br>01
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Team Health Check-up</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Medical Center, 9:00 AM</p>
            </div>
          </li>
           <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Dec<br>05
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Off-season Training Begins</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Training Ground</p>
            </div>
          </li>
        </ul>
      </section>

      <!-- Quick Links -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Quick Links</h2>
        <ul class="space-y-3">
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 mr-2" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
              Full Player Roster
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 mr-2" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V9m0 3v2m0 3.5V19M8.293 17.293A4 4 0 0118 10a4 4 0 01-11.707-2.707m-4.593 2.593c-.783.783-1.217 1.488-1.498 2.07-.15.318-.256.576-.328.783a.75.75 0 00-.001.077c.435.093.593.18.665.234a.75.75 0 00.323.076.75.75 0 00.12-.016c.395-.121.737-.306 1.05-.558c.28-.216.52-.469.72-.733.2-.264.36-.532.48-.795a.75.75 0 00.08-.168.75.75 0 00.04-1.072z"></path></svg>
              Injury Reports
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 mr-2" 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="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              Performance History
            </a>
          </li>
        </ul>
      </section>

    </aside>
  </div>
</div>

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.

Open Preview

                <div class="min-h-screen bg-stone-100 text-stone-800 font-serif dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8">

  <!-- Header -->
  <header class="flex justify-between items-center mb-8 px-4 py-3 bg-stone-200 dark:bg-stone-800 shadow-md rounded-lg border border-stone-300 dark:border-stone-700">
    <h1 class="text-2xl sm:text-3xl font-bold tracking-wider text-amber-800 dark:text-amber-500 uppercase">
      <span class="hidden sm:inline">The</span> Social Soiree
    </h1>
    <div class="flex items-center space-x-4">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
      </a>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-9 h-9 sm:w-10 sm:h-10 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
    </div>
  </header>

  <!-- Main Content Area -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar / Navigation -->
    <aside class="lg:col-span-1">
      <nav class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <ul class="space-y-4">
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
              <span>Dashboard</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
              <span>My Profile</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2zm7-2h-4v2h4V9zm-4-3h4v2h-4V6z" clip-rule="evenodd"></path></svg>
              <span>Messages <span class="ml-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-amber-600 rounded-full">3</span></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0010.518 8H10a2 2 0 00-2 2H6a2 2 0 00-2-2h-.518C3.238 6.606 1.684 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4zM10 14a6 6 0 000-12H8a6 6 0 000 12h2zm-2 2a2 2 0 100-4 2 2 0 000 4zM12 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0014.518 8H14a2 2 0 00-2 2h-2a2 2 0 00-2-2h-.518C1.238 6.606 0 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4z" clip-rule="evenodd"></path></svg>
              <span>Matches</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112.7 1.9L16 5.2a1 1 0 010 1.4L12.7 9.8a1 1 0 01-1.4-1.4L13.59 7H7a1 1 0 110-2h6.59l-2.29-2.29a1 1 0 010-1.414zM2 11h14a1 1 0 010 2H2a1 1 0 010-2z" clip-rule="evenodd"></path></svg>
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- Main Content / Profile Cards & Activity Feed -->
    <main class="lg:col-span-2 space-y-8">

      <!-- Discover New Profiles -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
          Discover New Profiles
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- Profile Card 1 -->
          <div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Alice, 28</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Creative Soul</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 2 -->
          <div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Ben, 31</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Adventurer</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 3 (hidden on smaller screens) -->
          <div class="hidden lg:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Chloe, 26</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Musician</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 4 (hidden on smaller screens) -->
          <div class="hidden xl:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/88.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Diana, 29</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Philosopher</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Recent Activity Feed -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
          Recent Activity
        </h2>
        <div class="space-y-6">
          <!-- Activity Item 1 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Sophia</span> liked your profile.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">2 hours ago</span>
            </div>
          </div>
          <!-- Activity Item 2 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Leo</span> sent you a new message.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">4 hours ago</span>
            </div>
          </div>
          <!-- Activity Item 3 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Isabella</span> viewed your profile.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">1 day ago</span>
            </div>
          </div>
        </div>
      </section>

    </main>
  </div>
</div>

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.

Open Preview

                <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>

Dashboards Component

A simple and responsive dashboards component designed for portfolio showcasing, with microinteractions and focused on earth tones. It supports dark theme using Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Portfolio Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=2" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=3" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
    </div>
    <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
        <p>Created by <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Your Name</a></p>
    </footer>
</div>

Retro Business Dashboard

A retro/vintage grayscale dashboard component for business/corporate websites, with moderate complexity and responsive design. Supports dark theme using Tailwind CSS dark: prefix for styling. Images sourced from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-sans min-h-screen p-8">
    <div class="container mx-auto">
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold">Dashboard</h1>
            <div class="flex items-center space-x-4">
                <input type="text" placeholder="Search..." class="p-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            </div>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Sales Overview</h2>
                <div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Recent Activity</h2>
                <ul class="space-y-2">
                    <li class="flex justify-between"><span>New Order</span><span>$250</span></li>
                    <li class="flex justify-between"><span>Product View</span><span>Widget X</span></li>
                    <li class="flex justify-between"><span>User Login</span><span>Admin</span></li>
                </ul>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Traffic Sources</h2>
                <div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 md:col-span-2 lg:col-span-3">
                <h2 class="text-xl font-semibold mb-4">Performance Metrics</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <h3 class="text-lg">Revenue</h3>
                        <p class="text-2xl font-bold">$12,345</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Visitors</h3>
                        <p class="text-2xl font-bold">5,678</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Orders</h3>
                        <p class="text-2xl font-bold">901</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Conversion</h3>
                        <p class="text-2xl font-bold">10.5%</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Dashboards Component

A retro-inspired dashboard component designed for business or corporate websites that combines 80s/90s aesthetics with a modern layout and color scheme. It is responsive and supports dark theme, featuring interactive elements such as cards for stats, user profiles, and more.

Open Preview

                <div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
    <header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
        <button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button>
    </header>
    <main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Total Sales</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p>
            <img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Users</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">1200</p>
            <img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Feedback</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">300</p>
            <img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Team Members</h2>
            <div class="flex space-x-2 mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full">
            </div>
        </div>
    </main>
    <footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4">
        <p>© 2023 Company Name. All rights reserved.</p>
    </footer>
</div>

Brutalist Grayscale Dashboard Component

A simple, brutalist-style, grayscale dashboard layout for business/corporate websites, responsive with dark mode support, built with Tailwind CSS.

Open Preview

                <section class="dashboard-component bg-white dark:bg-gray-900 text-black dark:text-white p-8 border-4 border-black dark:border-white">
  <div class="max-w-7xl mx-auto">
    <!-- Banner -->
    <div class="mb-8 border-4 border-black dark:border-white">
      <img src="https://picsum.photos/1200/200" alt="Dashboard Banner" class="w-full h-40 object-cover">
    </div>
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-3xl font-extrabold">Company Dashboard</h1>
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-black dark:border-white">
    </div>
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">Total Sales</h2>
        <p class="text-2xl">67,890</p>
      </div>
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">New Users</h2>
        <p class="text-2xl">1,234</p>
      </div>
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">Performance</h2>
        <p class="text-2xl">78%</p>
      </div>
    </div>
  </div>
</section>

Dashboard Component

A simple dashboard component with 3D design and pastel color scheme, responsive and with dark mode support.

Open Preview

                <div class="flex flex-wrap bg-gray-100 dark:bg-gray-900">
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-blue rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-users fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Users</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">2,156 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 10%</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-pink rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-chart-line fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Sales</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$5,340 <span class="text-pastel-red text-base"><i class="fas fa-arrow-down"></i> 5%</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-yellow rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-wallet fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Revenue</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$1,234 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 12%</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

Dashboards Component

A responsive dashboards component for social media applications featuring microinteractions and a triadic color scheme, built using Tailwind CSS.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-teal-400 dark:bg-teal-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://picsum.photos/50/50" alt="Profile" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Check how users interact with your posts.</p>
            </div>
        </div>
        <div class="bg-orange-400 dark:bg-orange-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Followers</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">See your growth in followers over time.</p>
            </div>
        </div>
        <div class="bg-purple-400 dark:bg-purple-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Post Performance</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Evaluate the performance of your latest posts.</p>
            </div>
        </div>
    </div>
</div>

Search Components

Categories

Dashboards