Componentes de búsqueda

Categorías

Paneles

Visualización de los indicadores clave de rendimiento

Tablero de control de Memphis Sepia

Un componente de tablero con una estética de Memphis Design, con formas geométricas audaces y una paleta de colores sepia / marrón cálido, adecuado para sitios web comerciales y corporativos. Incluye capacidad de respuesta completa y soporte para modo oscuro.

Abrir Vista previa

                <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

Un componente de tablero de complejidad moderada para aplicaciones deportivas/de fitness con un estilo de diseño industrial, con tonos tierra y diseño receptivo con soporte para modo oscuro. Muestra las métricas clave, las actividades recientes y el rendimiento individual/del equipo.

Abrir Vista previa

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

Panel de control social Art Deco

Un componente de panel de control de complejidad moderada para plataformas de citas/sociales, con un estilo de diseño Art Deco con colores apagados/desaturados y una capacidad de respuesta completa. Incluye tarjetas de perfil, fuente de actividad y navegación, con soporte para modo oscuro.

Abrir Vista previa

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

Componente Paneles

Un componente de panel de control de modo oscuro simple y monocromático para carteras, creado con Tailwind CSS. Cuenta con un diseño responsivo y utiliza diferentes tonos de un solo color para una apariencia elegante y minimalista.

Abrir Vista previa

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

Componente Paneles

Un componente de paneles de control simple y receptivo diseñado para la exhibición de cartera, con microinteracciones y centrado en los tonos tierra. Es compatible con el tema oscuro usando Tailwind CSS.

Abrir Vista previa

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

Panel de control de negocios retro

Un componente de tablero de pantalla de grises retro/vintage para sitios web comerciales/corporativos, con complejidad moderada y diseño receptivo. Admite el tema oscuro usando el prefijo Tailwind CSS dark: para el estilo. Imágenes procedentes de picsum.photos y avatares de randomuser.me.

Abrir Vista previa

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

Componente Paneles

Un componente de tablero de inspiración retro diseñado para sitios web comerciales o corporativos que combina la estética de los años 80/90 con un diseño y una combinación de colores modernos. Es responsivo y admite el tema oscuro, con elementos interactivos como tarjetas para estadísticas, perfiles de usuario y más.

Abrir Vista previa

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

Componente de tablero de escala de grises brutalista

Un diseño de panel de control simple, de estilo brutalista, en escala de grises para sitios web comerciales / corporativos, receptivo con soporte para modo oscuro, construido con Tailwind CSS.

Abrir Vista previa

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

Componente de panel de control

Un componente de tablero simple con diseño 3D y combinación de colores pastel, responsivo y con soporte para modo oscuro.

Abrir Vista previa

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

Componente Paneles

Un componente de paneles de control receptivo para aplicaciones de redes sociales con microinteracciones y un esquema de color triádico, construido con Tailwind CSS.

Abrir Vista previa

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