Rechercher des composants

Catégories

Tableaux

Affichage visuel des indicateurs clés de performance

Composant Tableaux de bord

Un composant de tableau de bord réactif conçu avec des éléments 3D et des tons Terre, présentant la visualisation des données et les panneaux de contrôle avec prise en charge du thème sombre.

Ouvrir Aperçu

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

Un composant de tableaux de bord complexe conçu pour le mode sombre avec une palette de couleurs monochromatiques pour une utilisation professionnelle/d’entreprise. Il comporte des éléments interactifs riches et est réactif.

Ouvrir Aperçu

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

Composant Tableaux de bord

Composant de tableaux de bord réactifs avec micro-interactions, schéma de couleurs en niveaux de gris et niveau de complexité complexe adapté à l’objectif du blog/contenu. Prend en charge le thème sombre.

Ouvrir Aperçu

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

Tableau de bord des médias sociaux

Un composant de tableau de bord réactif pour les réseaux sociaux avec des micro-interactions, une palette de couleurs complémentaires, une complexité modérée et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des profils d’utilisateurs avec des avatars de randomuser.me et des flux avec des images de picsum.photos.

Ouvrir Aperçu

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

Composant Tableaux de bord

Composant de tableaux de bord avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.

Ouvrir Aperçu

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

Composant Tableaux de bord

Un composant de tableau de bord avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

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

Composant Tableaux de bord

Un composant de tableau de bord minimaliste présentant un design plat avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.

Ouvrir Aperçu

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