Componentes Diseño de cuadrícula Diseño de cuadrícula de juegos Art Deco
Diseño de cuadrícula de juegos Art Deco

Un diseño de cuadrícula de juego responsivo inspirado en el Art Deco con patrones geométricos, colores en escala de grises y elementos interactivos. Diseñado para sitios web e interfaces de juegos, con soporte para modo oscuro.
Vista previa

Código HTML

<div class="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-50 font-sans p-4 sm:p-8 transition-colors duration-300">

  <!-- Grid Container -->
  <div class="container mx-auto max-w-7xl grid gap-4 lg:gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

    <!-- Main Feature Game Card (First Row Spanning) -->
    <div class="lg:col-span-2 relative overflow-hidden rounded-lg shadow-xl dark:shadow-2xl bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-2 border-gray-300 dark:border-gray-700 ">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'><g fill=\'%23000\' fill-opacity=\'0.1\'><path d=\'M0 0h1v20H0zM0 0h20v1H0zM19 0h1v20h-1zM0 19h20v1H0z\'/><rect x=\'5\' y=\'5\' width=\'10\' height=\'10\' fill=\'%23000\' opacity=\'0.2\'/><path d=\'M10 0v20M0 10h20\' stroke=\'%23000\' stroke-width=\'0.5\' opacity=\'0.1\'/></g></svg>');"></div>

      <img src="https://picsum.photos/1200/800?random=1" alt="Featured Game" class="w-full h-80 md:h-96 object-cover object-center transform scale-100 hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-t from-gray-900/90 to-transparent">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 text-gray-50 drop-shadow-lg leading-tight">Cosmic Odyssey: Starfall</h2>
        <p class="text-gray-200 text-sm sm:text-base font-medium flex items-center mb-4">
          <svg class="w-4 h-4 mr-1 text-gray-400" 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 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          Released: 2023-11-15
        </p>
        <button class="px-6 py-3 bg-gray-50 border-2 border-gray-50 text-gray-900 font-semibold rounded-full shadow-lg hover:bg-gray-200 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group">
          <span class="relative z-10">Play Now</span>
          <span class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
        </button>
      </div>
    </div>

    <!-- Game Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transform hover:-translate-y-1 hover:shadow-2xl transition-all duration-300 ease-in-out">
      <img src="https://picsum.photos/600/400?random=2" alt="Game One" class="w-full h-48 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="p-4 relative z-10">
        <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-100">Neon City Racers</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">High-octane futuristic racing.</p>
        <div class="mt-4 flex justify-between items-center">
          <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">Action</span>
          <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200">
            <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="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Game Card 2 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transform hover:-translate-y-1 hover:shadow-2xl transition-all duration-300 ease-in-out">
      <img src="https://picsum.photos/600/400?random=3" alt="Game Two" class="w-full h-48 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="p-4 relative z-10">
        <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-100">Aetherian Chronicles</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Epic fantasy RPG adventure.</p>
        <div class="mt-4 flex justify-between items-center">
          <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">RPG</span>
          <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200">
            <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="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Latest News/Blog Card -->
    <div class="lg:col-span-2 relative overflow-hidden rounded-lg shadow-xl dark:shadow-2xl bg-gradient-to-tl from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-2 border-gray-300 dark:border-gray-700 p-4 sm:p-6 flex flex-col justify-between">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'><g fill=\'%23000\' fill-opacity=\'0.1\'><path d=\'M0 0h1v20H0zM0 0h20v1H0zM19 0h1v20h-1zM0 19h20v1H0z\'/><rect x=\'5\' y=\'5\' width=\'10\' height=\'10\' fill=\'%23000\' opacity=\'0.2\'/><path d=\'M10 0v20M0 10h20\' stroke=\'%23000\' stroke-width=\'0.5\' opacity=\'0.1\'/></g></svg>');"></div>

      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 drop-shadow-md dark:text-gray-50 relative z-10">Latest Intel</h2>

      <div class="space-y-4 relative z-10">
        <!-- News Item 1 -->
        <div class="bg-gray-50 dark:bg-gray-950 p-3 rounded-md border border-gray-200 dark:border-gray-800 flex items-start space-x-3 group hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
          <img src="https://picsum.photos/50/50?random=4" alt="News Thumbnail" class="w-16 h-16 rounded-md object-cover flex-shrink-0">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-gray-50">New Patch incoming: 'The Void Gazer'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Discover the new content, bug fixes, and balance changes for your favorite game.</p>
            <span class="text-xs text-gray-500 dark:text-gray-400 block mt-2">2 hours ago</span>
          </div>
        </div>

        <!-- News Item 2 -->
        <div class="bg-gray-50 dark:bg-gray-950 p-3 rounded-md border border-gray-200 dark:border-gray-800 flex items-start space-x-3 group hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
          <img src="https://picsum.photos/50/50?random=5" alt="News Thumbnail" class="w-16 h-16 rounded-md object-cover flex-shrink-0">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-gray-50">Dev AMA Session Recap: Future of the game revealed!</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Highlights from our recent Ask Me Anything session with the development team.</p>
            <span class="text-xs text-gray-500 dark:text-gray-400 block mt-2">Yesterday</span>
          </div>
        </div>
      </div>

      <button class="mt-6 w-full px-6 py-3 bg-gray-50 border-2 border-gray-50 text-gray-900 font-semibold rounded-full shadow-lg hover:bg-gray-200 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group z-10">
        <span class="relative z-10">Read All News</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

    <!-- Leaderboard Card -->
    <div class="relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 sm:p-6 flex flex-col">
      <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-50">Top Players</h3>
      <div class="space-y-3">
        <!-- Player 1 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">1.</span>
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Axton_Prime</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 1,230,456</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🏆</span>
        </div>
        <!-- Player 2 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">2.</span>
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Shadow_Queen</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 987,654</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🥈</span>
        </div>
         <!-- Player 3 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">3.</span>
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Vortex_Hunter</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 876,543</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🥉</span>
        </div>
      </div>
      <button class="mt-6 w-full px-6 py-3 bg-gray-200 border border-gray-200 text-gray-800 font-semibold rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group ">
        <span class="relative z-10">View Full Leaderboard</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

    <!-- Community/Stream Card -->
    <div class="relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 sm:p-6 flex flex-col">
      <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-50">Live Streams</h3>
      <div class="space-y-3">
        <!-- Stream Item 1 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Streamer Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-red-500 flex-shrink-0 animate-pulse">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">GamerGirl_Lexa <span class="text-red-500 text-xs font-bold ml-1">LIVE</span></p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Playing: Cosmic Odyssey</p>
          </div>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14.553 5.356A1.5 1.5 0 0117 12.004v1.992a1.5 1.5 0 01-2.447 1.156l-3.371-2.106a1.5 1.5 0 010-2.312l3.371-2.106zM9 10a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1v-4z"></path><path d="M2 13a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2z"></path></svg>
          </a>
        </div>
        <!-- Stream Item 2 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Streamer Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-red-500 flex-shrink-0 animate-pulse">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">ProGamer_Xero <span class="text-red-500 text-xs font-bold ml-1">LIVE</span></p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Playing: Neon City Racers</p>
          </div>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14.553 5.356A1.5 1.5 0 0117 12.004v1.992a1.5 1.5 0 01-2.447 1.156l-3.371-2.106a1.5 1.5 0 010-2.312l3.371-2.106zM9 10a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1v-4z"></path><path d="M2 13a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2z"></path></svg>
          </a>
        </div>
      </div>
      <button class="mt-6 w-full px-6 py-3 bg-gray-200 border border-gray-200 text-gray-800 font-semibold rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group">
        <span class="relative z-10">Join Community</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

  </div>
</div>
Componentes relacionados

Skeuomorfismo Diseño de cuadrícula vibrante

Componente de diseño de cuadrícula receptivo con soporte de modo oscuro, diseño de skeuomorfismo, colores vibrantes, complejidad moderada, adecuado para carteras.
Abrir
Travel_Booking_Grid_Layout_Component

Un componente de diseño de cuadrícula complejo y receptivo para un sitio web de reserva de viajes con un diseño corporativo/profesional, combinación de colores análoga y compatibilidad con el modo oscuro. Cuenta con tarjetas de destino, entrada de búsqueda y una barra lateral.
Abrir
Componente de diseño de cuadrícula 29

Un componente de diseño de cuadrícula receptivo diseñado en un estilo brutalista con alto contraste y diseños inusuales, compatible con el modo oscuro con Tailwind CSS.
Abrir