VibeCoderzVibeCoderz
Telegram
All Prompts
Responsive Header with Logo, Nav & CTA Button preview
headernavbarnavigationtailwindresponsivectabranding

Responsive Header with Logo, Nav & CTA Button

Адаптивный заголовок Tailwind: лого, навигация (скрывается на мобильных) и кнопка CTA. Для сайтов с брендингом и призывом к действию.

Prompt

<header class="border-amber-900/20 border-b relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; header:nth-of-type(1)">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between py-5">
          <!-- Brand Logo -->
          <a href="#" class="flex items-center gap-3">
            <span class="bg-center text-3xl italic text-white tracking-tight font-script w-[120px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a68dc15f-fb85-48af-b6c2-5c189e6f4c23_1600w.png)] bg-cover"></span>
          </a>

          <!-- Nav -->
          <nav class="hidden md:flex items-center gap-8 text-sm text-neutral-300 font-sans">
            <a href="#" class="hover:text-amber-400 transition-colors">
              Our Story
            </a>
            <a href="#" class="hover:text-amber-400 transition-colors">
              Coffee Selection
            </a>
            <a href="#" class="hover:text-amber-400 transition-colors">
              Brewing Guides
            </a>
            <a href="#" class="hover:text-amber-400 transition-colors">
              Visit Us
            </a>
          </nav>

          <!-- Actions -->
          <div class="flex items-center gap-3">
            <button class="group relative w-auto cursor-pointer select-none text-base leading-7 flex transition-all duration-200 ease-out focus:outline-none hover:brightness-95 active:brightness-90 font-semibold text-[#1a1614] bg-amber-400 border-0 pt-2.5 pr-6 pb-2.5 pl-6 rotate-[-1deg] items-center justify-center rounded font-sans">
              <span class="relative z-10">Subscribe</span>
              <span aria-hidden="true" class="pointer-events-none absolute border border-[#1a1614] bottom-1 left-1 w-[calc(100%-1px)] h-[calc(100%-1px)] transition-all duration-200 ease-out group-hover:bottom-0.5 group-hover:left-0.5 rounded"></span>
            </button>
          </div>
        </div>
      </div>
    </header>
All Prompts