navigationnavbarmenutailwindresponsiveheaderlink

Tailwind Responsive Navigation Bar

Адаптивная навигационная панель Tailwind CSS. Горизонтальный хедер с 3 ссылками (Work, Process, Contact) для простого меню сайта. Адаптивные размеры, отступы, ховер-эффект.

Live Preview

Prompt

<div class="sm:h-12 flex sm:px-6 text-white bg-black w-full h-10 rounded-sm pr-4 pl-4 items-center justify-between">
  <div class="w-full grid grid-cols-3 text-[13px] sm:text-sm font-medium">
    <div class="flex items-center justify-center cursor-pointer" onclick="window.location.href='/work'" role="button">
      Work</div>
    <div class="flex border-x border-white/20 items-center justify-center cursor-pointer"
      onclick="window.location.href='/process'" role="button">Process
    </div>
    <div class="flex items-center justify-center cursor-pointer" onclick="window.location.href='/contact'"
      role="button">Contact</div>
  </div>

  <!-- Floating Social Button -->

</div>

All Prompts