Composants Navigation collante Composante de navigation collante brutaliste

Composante de navigation collante brutaliste

Barre de navigation autocollante brutaliste en niveaux de gris pour un blog avec prise en charge du mode sombre

Aperçu

HTML Code

<nav class="bg-gray-900 border-b-4 border-gray-100 sticky top-0 z-50 font-mono">
  <div class="container mx-auto px-4 py-6 flex flex-wrap justify-between items-center">
    <div class="text-gray-100 text-4xl font-extrabold uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-400 transition duration-300 ease-in-out">THE BLOG</a>
    </div>
    <div class="block lg:hidden">
      <button class="text-gray-100 focus:outline-none focus:text-gray-400">
        <svg class="h-8 w-8" 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"></path>
        </svg>
      </button>
    </div>
    <div class="w-full lg:w-auto lg:flex flex-grow lg:flex-grow-0 hidden lg:block mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8 text-xl font-bold uppercase">
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Home</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Articles</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="bg-gray-800 border-t-4 border-gray-100 py-3">
    <div class="container mx-auto px-4 flex flex-wrap justify-center lg:justify-between items-center text-gray-300 text-sm">
      <div class="tracking-wide mb-2 lg:mb-0">
        FEATURED TOPICS: <span class="font-bold">TECHNOLOGY / DESIGN / ART / CULTURE</span>
      </div>
      <div class="flex space-x-4">
        <input type="text" placeholder="SEARCH THE VOID..." class="px-3 py-1 bg-gray-700 text-gray-100 placeholder-gray-400 border-2 border-gray-100 focus:outline-none focus:border-gray-400 text-sm">
        <button class="bg-gray-600 text-gray-100 px-4 py-1 border-2 border-gray-100 hover:bg-gray-400 hover:text-gray-900 transition duration-300 ease-in-out">GO</button>
      </div>
    </div>
  </div>
</nav>

Composants associés

Skeuomorphe en niveaux de gris Sticky Nav

Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.

Ouvrir

Navigation collante brutaliste

Un composant de navigation autocollant de style brutaliste avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Présente un contraste élevé, une typographie audacieuse et une esthétique austère et brute.

Ouvrir

Composant de navigation collante

Barre de navigation autocollante minimaliste et réactive pour un site Web météo/climat, avec des couleurs neutres froides, la prise en charge du mode sombre et des éléments interactifs. Conçu pour une complexité moyenne avec des liens fonctionnels et une barre de recherche.

Ouvrir