Composants En-tête Composant d’en-tête

Composant d’en-tête

Composant d’en-tête simple et réactif pour un blog ou un site de contenu avec un style monochromatique et une prise en charge du mode sombre, en se concentrant sur des micro-interactions subtiles lors du survol des liens de navigation.

Aperçu

HTML Code

<header class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-300">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
        MyBlog
      </a>
    </div>
    <nav class="">
      <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Home
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Articles
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            About
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Contact
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Composants associés

Composant d’en-tête

Un composant d’en-tête réactif pour une plate-forme musicale/audio, doté d’une esthétique de conception monospace/développeur avec des tons de terre et la prise en charge du mode sombre.

Ouvrir

Composant d’en-tête

Un composant d’en-tête simple conçu à l’aide du style Neumorphism avec des couleurs vives, parfait pour un blog/une page Web de contenu. Il prend en charge le mode sombre pour un design réactif.

Ouvrir

SkeuoHeaderComponent

Un composant d’en-tête réactif avec un design Skeuomorphism, la prise en charge du thème sombre et une barre de navigation.

Ouvrir