Search Components

Dashboards

Visual display of key performance indicators

Dashboards Component

A responsive dashboard component designed with 3D elements and Earth tones, showcasing data visualization and control panels with dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
    <div class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Dashboard</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Card 1 -->
            <div class="bg-yellow-100 dark:bg-yellow-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=1" alt="Data Visualization" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
                    <p class="text-gray-600 dark:text-gray-400">Current sales data and trends.</p>
                </div>
            </div>
            <!-- Card 2 -->
            <div class="bg-green-100 dark:bg-green-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=2" alt="User Engagement" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h2>
                    <p class="text-gray-600 dark:text-gray-400">Track user interactions and engagement metrics.</p>
                </div>
            </div>
            <!-- Card 3 -->
            <div class="bg-blue-100 dark:bg-blue-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=3" alt="Performance Metrics" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Performance Metrics</h2>
                    <p class="text-gray-600 dark:text-gray-400">Analyze performance against key metrics.</p>
                </div>
            </div>
            <!-- Card 4 -->
            <div class="bg-red-100 dark:bg-red-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=4" alt="Visitor Statistics" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Visitor Statistics</h2>
                    <p class="text-gray-600 dark:text-gray-400">Monitor visitor statistics and behavior.</p>
                </div>
            </div>
        </div>
        <div class="mt-6">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Users</h2>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
                <ul class="space-y-4">
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 2 days ago</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 1 week ago</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 3 weeks ago</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Dashboards Component

A complex dashboards component designed for dark mode with a monochromatic color scheme for business/corporate use. It features rich interactive elements and is responsive.

Open Preview

                <div class="min-h-screen bg-gray-900 text-gray-100 flex flex-col">
    <header class="bg-gray-800 p-4 flex justify-between items-center">
        <h1 class="text-2xl font-bold">Dashboard</h1>
        <nav class="flex space-x-4">
            <a href="#" class="hover:underline">Home</a>
            <a href="#" class="hover:underline">Reports</a>
            <a href="#" class="hover:underline">Settings</a>
        </nav>
    </header>

    <main class="flex-1 p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Overview</h2>
            <img src="https://picsum.photos/400/200" alt="Overview Image" class="rounded-lg mb-2" />
            <p class="text-sm">Quick insights into the company metrics.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Stats</h2>
            <img src="https://picsum.photos/400/200?random=1" alt="Stats Image" class="rounded-lg mb-2" />
            <p class="text-sm">Detailed statistics overview.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Team</h2>
            <div class="flex flex-wrap">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
                <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
                <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
             </div>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Sales</h2>
            <img src="https://picsum.photos/400/200?random=2" alt="Sales Image" class="rounded-lg mb-2" />
            <p class="text-sm">Current sales metrics and trends.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Notifications</h2>
            <ul class="list-disc pl-5">
                <li class="text-sm">New project updates</li>
                <li class="text-sm">User feedback received</li>
                <li class="text-sm">System maintenance scheduled</li>
            </ul>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Activities</h2>
            <p class="text-sm">Recent team activities will be displayed here.</p>
        </div>
    </main>

    <footer class="bg-gray-800 p-4 text-center">
        <p class="text-sm">&copy; 2023 Your Company. All Rights Reserved.</p>
    </footer>
</div>

Dashboards Component

Responsive Dashboards Component with Microinteractions, Grayscale color scheme, and Complex complexity level tailored for Blog/Content purpose. Supports dark theme.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Content Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero et diam euismod, vitae elementum.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Peter Jones</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

  </div>
</div>

A responsive social media dashboard component with microinteractions, complementary color scheme, moderate complexity, and dark theme support using Tailwind CSS. Includes user profiles with avatars from randomuser.me and feeds with images from picsum.photos.

Open Preview

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900">
  <div class="flex flex-col md:flex-row gap-4">
    <!-- Sidebar (User Profile) -->
    <div class="w-full md:w-1/4 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
      <div class="flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mb-4 border-2 border-blue-500">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        <div class="mt-4 flex gap-4">
          <span class="text-blue-500 cursor-pointer hover:underline">Followers: 1.2k</span>
          <span class="text-blue-500 cursor-pointer hover:underline">Following: 350</span>
        </div>
      </div>
    </div>

    <!-- Main Content (Feed) -->
    <div class="w-full md:w-3/4">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 mb-4 transform transition duration-300 hover:scale-105">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <div>
            <p class="font-semibold text-gray-800 dark:text-white">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Enjoying a beautiful day out in the nature! #nature #happy</p>
        <img src="https://picsum.photos/600/400" alt="Post Image" class="rounded-lg mb-4">
        <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
          <span class="cursor-pointer hover:text-blue-500">Likes: 25</span>
          <span class="cursor-pointer hover:text-blue-500">Comments: 5</span>
          <span class="cursor-pointer hover:text-blue-500">Share</span>
        </div>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/60.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <div>
            <p class="font-semibold text-gray-800 dark:text-white">Peter Jones</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">New blog post is up! Check it out. #blogging #technology</p>
        <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
          <span class="cursor-pointer hover:text-blue-500">Likes: 15</span>
          <span class="cursor-pointer hover:text-blue-500">Comments: 3</span>
          <span class="cursor-pointer hover:text-blue-500">Share</span>
        </div>
      </div>
    </div>
  </div>
</div>

Dashboards Component

Dashboards Component with Neumorphism design, responsive effects, and dark theme support.

Open Preview

                <section class="p-8 dark:bg-gray-900 dark:text-white">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">

      <!-- Card 1 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Sales Overview</h3>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <!-- Card 2 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Revenue Analysis</h3>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <!-- Card 3 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Customer Growth</h3>
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>

      <!-- Card 4 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Marketing Performance</h3>
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <!-- Card 5 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Inventory Status</h3>
        <p class="text-gray-700 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>

      <!-- Card 6 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Website Traffic</h3>
        <p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
      </div>

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

Dashboards Component

A dashboard component with responsive design and dark mode support using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    </div>
  </div>
</div>

Dashboards Component

A minimalist dashboard component showcasing flat design with responsive effects and dark theme support, built using Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="container mx-auto px-4 py-8">
        <h2 class="text-3xl font-semibold text-gray-800 dark:text-white mb-6">Dashboard</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Users</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">1,234</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Sales</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">567</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Revenue</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">$12,345</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Sessions</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">1,890</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
        </div>
        <div class="mt-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Latest Users</h3>
            <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">John Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">Jane Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">Mike Smith</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Search Components

Categories

Dashboards

Dashboards Component

Dashboards Component

Dashboards Component

Social Media Dashboard

Dashboards Component

Dashboards Component

Dashboards Component