Componentes Mapas Componente de mapa del tablero de Brutalist

Componente de mapa del tablero de Brutalist

Un componente de mapa de tablero de estilo brutalista con colores vibrantes, alto contraste, elementos interactivos complejos, diseño receptivo y soporte de temas oscuros con Tailwind CSS.

Vista previa

Código HTML

<div class="bg-yellow-300 dark:bg-purple-900 text-gray-900 dark:text-gray-100 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 border-b-4 border-red-500 pb-2">Dashboard Overview</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Map Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-blue-500 pb-2">Geographical Data</h2>
        <div class="h-64 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">
          [Interactive Map Placeholder]
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric A</h3>
            <p class="text-xl text-green-600 dark:text-green-400">1,245</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric B</h3>
            <p class="text-xl text-red-600 dark:text-red-400">489</p>
          </div>
        </div>
      </div>

      <!-- Data Visualization Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-purple-500 pb-2">Key Metrics</h2>
        <div class="space-y-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Sales Performance</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">User Engagement</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Table Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
      <h2 class="text-2xl font-bold mb-4 border-b-2 border-orange-500 pb-2">Recent Activity</h2>
      <table class="min-w-full border-collapse border border-black dark:border-lime-400">
        <thead>
          <tr>
            <th class="border border-black dark:border-lime-400 p-2 text-left">User</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Action</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Timestamp</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>John Doe</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Viewed Report</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:30</td>
          </tr>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
               <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>Jane Smith</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Updated Dashboard</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:45</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Componentes relacionados

Componente Mapas

Un componente de mapas responsivo diseñado con un estilo skeuomórfico, con suaves colores pastel y una interfaz rica adecuada para las redes sociales. El componente admite los modos claro y oscuro e incluye varios elementos interactivos.

Abrir

LujoComidaMapasComponente

Un componente de mapa de comida/restaurante elegante y receptivo con un esquema de color con temática de dulces, adecuado para computadoras de escritorio, tabletas y dispositivos móviles, incluida la compatibilidad con el modo oscuro. Cuenta con un área de mapa prominente y una lista de ubicaciones de restaurantes premium.

Abrir

IndustrialVibrantMapsComponent

Un componente de mapa interactivo y receptivo con una estética industrial y cruda y un esquema de color vibrante, adecuado para aplicaciones de tecnología/SaaS. Incluye soporte para modo oscuro.

Abrir