Componentes de búsqueda

Categorías

Componentes Componentes de mejora de la navegación

Componentes de mejora de la navegación

Componentes avanzados que mejoran la navegación del sitio web

Navegación de Tarjetas de Noticias de Agricultura

Un componente de navegación simple, inspirado en papel / impresión que presenta una tarjeta de noticias para sitios web de agricultura y agricultura, utilizando un esquema de color análogo. Es totalmente receptivo con soporte para modo oscuro.

Abrir Vista previa

                <nav class="bg-amber-100 dark:bg-gray-800 p-4 shadow-md font-serif border-b-4 border-amber-300 dark:border-gray-700">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-xl font-bold text-amber-900 dark:text-amber-100 flex items-center mb-4 md:mb-0">
      <svg class="w-8 h-8 mr-2 text-lime-700 dark:text-lime-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm4-1a1 1 0 00-1 1v4a1 1 0 102 0V9a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
      AgriConnect
    </a>

    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-amber-900 dark:text-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded-md p-2">
        <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="menu" class="hidden md:flex md:flex-grow md:items-center md:w-auto w-full mt-4 md:mt-0">
      <ul class="flex flex-col md:flex-row md:ml-auto md:space-x-8 space-y-2 md:space-y-0 w-full md:w-auto">
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Home</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">News</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Resources</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Contact</a></li>
      </ul>
    </div>

    <div class="w-full md:w-auto mt-4 md:mt-0 md:ml-8">
      <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-sm border border-amber-200 dark:border-gray-600 flex flex-col md:flex-row items-center space-y-3 md:space-y-0 md:space-x-3 max-w-sm mx-auto md:mx-0">
        <img class="w-16 h-16 rounded-full object-cover border-2 border-amber-300 dark:border-gray-500" src="https://picsum.photos/seed/farmnews/60/60" alt="News thumbnail">
        <div class="flex-grow text-center md:text-left">
          <p class="text-sm font-semibold text-amber-900 dark:text-amber-100 mb-1 leading-tight">Latest: Sustainable Farming Practices</p>
          <a href="#" class="text-xs text-lime-700 dark:text-lime-300 hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuButton = document.getElementById('menu-button');
      const menu = document.getElementById('menu');

      menuButton.addEventListener('click', function() {
        menu.classList.toggle('hidden');
      });
    });
  </script>
</nav>

Luxury_Vibrant_Travel_Navigation

Un componente de navegación complejo, lujoso y vibrante diseñado para sitios web de viajes y turismo, con tipografía sofisticada, colores de alta saturación y capacidad de respuesta completa con soporte para modo oscuro.

Abrir Vista previa

                <nav class="bg-gradient-to-r from-purple-700 via-pink-600 to-orange-500 shadow-xl dark:from-purple-900 dark:via-pink-800 dark:to-orange-700 transition-colors duration-500 ease-in-out">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
    <div class="flex items-center flex-shrink-0">
      <a href="#" class="text-white font-serif text-3xl font-extrabold tracking-wider animate-pulse transition-transform duration-300 hover:scale-105
        bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 via-sky-300 to-lime-300 inline-block py-1 rounded-lg px-2
        dark:from-yellow-200 dark:via-sky-200 dark:to-lime-200">
        LUXVoyage
      </a>
    </div>

    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-yellow-300 transition-colors duration-300 relative group">
        Destinations
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-sky-300 transition-colors duration-300 relative group">
        Packages
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-sky-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-lime-300 transition-colors duration-300 relative group">
        Experiences
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-lime-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-orange-300 transition-colors duration-300 relative group">
        About Us
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-orange-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex items-center space-x-6 lg:space-x-8">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-4 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:bg-opacity-30 dark:bg-black dark:bg-opacity-20 dark:placeholder-gray-300 dark:focus:ring-yellow-300 transition-all duration-300 ease-in-out text-sm w-36 lg:w-48">
        <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-white" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <button class="flex items-center space-x-2 text-white bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full px-4 py-2 transition-all duration-300 ease-in-out
        shadow-lg hover:shadow-xl">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-yellow-300 select-none">
        <span class="font-medium hidden lg:inline">Account</span>
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>

       <button id="dark-mode-toggle" class="p-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-300" aria-label="Toggle dark mode">
        <svg class="h-6 w-6 hidden dark:block" fill="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 3v1m0 16v1m9-9h1M3 12H2m15.325 5.5l.707.707M6.707 6.707l-.707-.707M16.95 7.05l.707-.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
        </svg>
        <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
      </button>
    </div>

    <div class="md:hidden flex items-center">
      <button id="mobile-menu-button" class="p-2 text-white hover:text-yellow-300 focus:outline-none focus:text-yellow-300 transition-colors duration-300" aria-label="Open mobile menu">
        <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden pb-4">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-center">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Destinations
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Packages
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Experiences
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        About Us
      </a>
      <div class="relative w-full px-4 mt-2">
        <input type="text" placeholder="Search..." class="w-full py-2 pl-4 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:bg-opacity-30 dark:bg-black dark:bg-opacity-20 dark:placeholder-gray-300 dark:focus:ring-yellow-300 transition-all duration-300 ease-in-out text-sm">
        <svg class="absolute right-7 top-1/2 -translate-y-1/2 h-5 w-5 text-white" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <button class="flex items-center justify-center space-x-2 text-white bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full px-4 py-2 mt-2 w-full mx-4 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-yellow-300">
        <span class="font-medium">Account</span>
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <button id="dark-mode-toggle-mobile" class="p-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-300 mt-2" aria-label="Toggle dark mode">
        <svg class="h-6 w-6 hidden dark:block" fill="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 3v1m0 16v1m9-9h1M3 12H2m15.325 5.5l.707.707M6.707 6.707l-.707-.707M16.95 7.05l.707-.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
        </svg>
        <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

<script>
  // JavaScript for mobile menu toggle
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

  mobileMenuButton.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });

  // JavaScript for dark mode toggle
  function toggleDarkMode() {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.remove('dark');
      localStorage.theme = 'light';
    } else {
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    }
  }

  // Initial check for dark mode preference
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }

  document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode);
  document.getElementById('dark-mode-toggle-mobile').addEventListener('click', toggleDarkMode);
</script>

Componente Componentes de mejora de navegación

Un componente de navegación responsivo con soporte de modo oscuro para sitios web de comercio electrónico. Cuenta con un esquema de color triádico con un fondo oscuro para reducir la fatiga visual.

Abrir Vista previa

                <nav class="bg-gray-900 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-white text-lg font-semibold">E-Shop</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Products</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Categories</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-800 text-white px-3 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      <button class="bg-blue-600 dark:bg-green-600 text-white px-4 py-1 rounded-md">Cart</button>
    </div>
  </div>
</nav>

Componentes de mejora de la navegación

Una barra de navegación Retro/Vintage con un diseño complejo para sitios web profesionales, con una combinación de colores triádica y compatibilidad con temas oscuros receptivos.

Abrir Vista previa

                <nav class="bg-pink-700 dark:bg-pink-800 p-4">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
            <span class="text-yellow-300 dark:text-yellow-200 text-2xl font-bold">MyCompany</span>
        </div>
        <div class="hidden md:flex space-x-6 text-white dark:text-gray-300">
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Home</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">About</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Services</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Contact</a>
        </div>
        <div class="relative">
            <button class="bg-yellow-300 dark:bg-yellow-200 text-black dark:text-black px-4 py-2 rounded-md hover:shadow-lg transition">Login</button>
            <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg hidden group-hover:block">
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
            </div>
        </div>
        <div class="md:hidden">
            <button class="text-white dark:text-gray-300 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
            </button>
        </div>
    </div>
</nav>

<section class="bg-gray-100 dark:bg-gray-900 py-10">
    <div class="max-w-7xl mx-auto text-center">
        <h1 class="text-4xl font-bold text-green-500 dark:text-green-400">Welcome to our Retro Business</h1>
        <p class="mt-2 text-gray-700 dark:text-gray-400">Bringing you the best services with a touch of nostalgia.</p>
        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=1" alt="Service 1" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service One</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 1.</p>
            </div>
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=2" alt="Service 2" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service Two</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 2.</p>
            </div>
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=3" alt="Service 3" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service Three</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 3.</p>
            </div>
        </div>
    </div>
</section>

Componente de mejora de la navegación

Un componente de navegación responsivo diseñado para una cartera, que utiliza un estilo brutalista con un esquema de color pastel y soporte para modo oscuro.

Abrir Vista previa

                <nav class="bg-white dark:bg-gray-800 p-6 flex justify-between items-center shadow-lg">
    <a href="#" class="text-2xl font-bold text-pink-600 dark:text-pink-300">My Portfolio</a>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Projects</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Contact</a>
    </div>
</nav>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=1" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, emphasizing its features, technologies used, and challenges faced.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=2" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, focusing on user experience and the development process.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=3" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, detailing the problem solved and feedback received.</p>
        </div>
    </div>
</section>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Meet the Team</h2>
    <div class="flex flex-wrap justify-center space-x-6 mt-6">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">Frontend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            <p class="text-gray-600 dark:text-gray-400">Backend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Adam Johnson</h3>
            <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
        </div>
    </div>
</section>

Componentes de mejora de la navegación

Un componente de navegación de estilo retro/vintage diseñado para el consumo de blogs y contenido con soporte para temas oscuros.

Abrir Vista previa

                <nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-2xl font-bold hover:text-blue-400 dark:hover:text-blue-300">Retro Blog</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">About</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Blog</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-white focus:outline-none">
                <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Home</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Blog</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Welcome to the Retro Blog!</h1>
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/150" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/151" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/152" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
    </div>
</main>

<footer class="bg-gray-800 text-white p-4 dark:bg-gray-900 mt-8">
    <div class="container mx-auto text-center">
        <p>&copy; 2023 Retro Blog. All rights reserved.</p>
    </div>
</footer>

Componentes de mejora de la navegación

Un componente de navegación responsivo con un estilo con una estética retro/vintage, adecuado para aplicaciones de comercio electrónico, con soporte para temas oscuros e interactividad moderada.

Abrir Vista previa

                <nav class="bg-gray-900 text-white p-4 dark:bg-gray-800">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-xl font-bold hover:text-yellow-400 dark:hover:text-yellow-300">ShopRetro</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Home</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Products</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">About Us</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Contact</a></li>
            </ul>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-700 text-white rounded-lg p-2 dark:bg-gray-600" />
            <a href="#" class="relative">
                <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-yellow-400 dark:border-yellow-300" />
                <span class="absolute top-0 right-0 bg-yellow-500 rounded-full h-3 w-3 dark:bg-yellow-300"></span>
            </a>
            <button class="bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-300 rounded-lg p-2">Cart</button>
        </div>
    </div>
    <div class="bg-yellow-500 p-4 dark:bg-yellow-400">
        <div class="container mx-auto flex justify-between items-center">
            <p class="text-gray-900 dark:text-gray-800">Free Shipping on orders over $50</p>
            <a href="#" class="bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg p-2">Shop Now</a>
        </div>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
    <div class="container mx-auto flex flex-wrap">
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$19.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$29.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$39.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
    </div>
</main>

Componente de mejora de la navegación

Un componente de navegación inspirado en el morfismo de vidrio diseñado para mostrar el trabajo de la cartera y los productos compatibles con tonos tierra y modo oscuro. El componente presenta un efecto de vidrio esmerilado, un diseño receptivo y elementos mínimos.

Abrir Vista previa

                <nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
    </div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
</nav>

<section class="p-8 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
        <p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
      </div>
    </div>
    <!-- Repeat similar divs for more projects -->
  </div>
</section>

Componentes de mejora de la navegación

Un componente de mejora de la navegación receptiva para un blog en estilo de modo oscuro con colores vibrantes y características de complejidad moderada.

Abrir Vista previa

                <nav class="bg-gray-900 text-white p-4 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-bold hover:text-blue-400">My Blog</a>
            <a href="#" class="hover:text-blue-400">Home</a>
            <a href="#" class="hover:text-blue-400">About</a>
            <a href="#" class="hover:text-blue-400">Contact</a>
        </div>
        <div class="relative">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white rounded-full pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
            <svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/>
                <circle cx="10.5" cy="10.5" r="6.5"/>
            </svg>
        </div>
    </div>
</nav>

<section class="bg-gray-800 text-white p-8 mt-4">
    <h2 class="text-2xl font-bold mb-4">Latest Articles</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=1" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 1</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=2" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 2</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=3" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 3</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
    </div>
</section>

<footer class="bg-gray-900 text-white p-4 mt-4">
    <div class="container mx-auto flex justify-between items-center">
        <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="user avatar" class="w-8 h-8 rounded-full" />
            <span class="text-sm">User Name</span>
        </div>
    </div>
</footer>

Componentes de mejora de la navegación

Un componente de navegación diseñado en 3D con un esquema de color análogo, complejidad moderada, adecuado para la visualización de datos del tablero y los paneles de control.

Abrir Vista previa

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
    <div class="container mx-auto flex items-center justify-between">
        <h1 class="text-white text-2xl font-bold">Dashboard</h1>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Home</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-300 focus:outline-none">
                <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700 dark:border-gray-300 mr-3">
        <div class="text-white">
            <p class="text-sm">John Doe</p>
            <p class="text-xs text-gray-400">Admin</p>
        </div>
    </div>
    <div class="mt-4 bg-gray-700 dark:bg-gray-800 rounded-lg shadow-md p-4">
        <h2 class="text-white text-lg font-semibold">Quick Links</h2>
        <ul class="mt-2 space-y-2">
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Profile</a></li>
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Messages</a></li>
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Alerts</a></li>
        </ul>
    </div>
</nav>