Componentes Filtros Luxury_Retro_Gaming_Filters

Luxury_Retro_Gaming_Filters

Un componente de filtro simple, elegante y receptivo para sitios web de juegos con una estética retro de lujo. Cuenta con colores vintage apagados, tipografía sofisticada y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<div class="font-['Cinzel_Decorative'] bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-300 dark:border-stone-700 max-w-full mx-auto">
  <h2 class="text-2xl sm:text-3xl font-bold text-center mb-6 uppercase tracking-wider text-rose-800 dark:text-rose-400">Game Filters</h2>
  
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- Platform Filter -->
    <div class="flex flex-col">
      <label for="platform-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Platform</label>
      <select id="platform-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Platforms</option>
        <option value="pc">PC</option>
        <option value="playstation">PlayStation</option>
        <option value="xbox">Xbox</option>
        <option value="nintendo">Nintendo</option>
      </select>
    </div>

    <!-- Genre Filter -->
    <div class="flex flex-col">
      <label for="genre-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Genre</label>
      <select id="genre-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Genres</option>
        <option value="rpg">RPG</option>
        <option value="action">Action</option>
        <option value="strategy">Strategy</option>
        <option value="adventure">Adventure</option>
        <option value="sports">Sports</option>
      </select>
    </div>

    <!-- Year Filter -->
    <div class="flex flex-col">
      <label for="year-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Year</label>
      <select id="year-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Years</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
        <option value="2021">2021</option>
        <option value="older">Older</option>
      </select>
    </div>

    <!-- Price Filter (conceptual, could be 'free', 'paid' or specific range) -->
    <div class="flex flex-col">
      <label for="price-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Price</label>
      <select id="price-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">Any Price</option>
        <option value="free">Free</option>
        <option value="paid">Paid</option>
        <option value="under-20">Under $20</option>
      </select>
    </div>

  </div>

  <div class="flex justify-center mt-8">
    <button class="px-6 py-3 bg-rose-700 text-rose-100 dark:bg-rose-600 dark:text-rose-100 rounded-md font-bold uppercase tracking-wider shadow-lg hover:bg-rose-800 dark:hover:bg-rose-700 transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
      Apply Filters
    </button>
  </div>
</div>

<!-- To use the Cinzel Decorative font, you'd typically include it via Google Fonts in your HTML head: -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet"> -->

Componentes relacionados

FiltrosComponenteNemorfismo

Un componente de filtros responsivos simple con estilo de interfaz de usuario suave Neumorphism, que utiliza un esquema de color en escala de grises, diseñado para sitios web comerciales / corporativos. El componente es compatible con el modo oscuro y está construido con Tailwind CSS sin ningún JavaScript.

Abrir

Componente de filtros

Un componente de filtros complejo y receptivo con elementos de diseño 3D y un esquema de color triádico, adecuado para sitios web de blogs/contenido. Admite tema oscuro.

Abrir

Componente de filtros

Un componente de filtros receptivo diseñado para la interfaz de usuario del modo oscuro con Tailwind CSS. Incluye opciones para filtrar contenido, usa fondos oscuros y ahorra batería.

Abrir