Tailwind Navigation (horizontal) Components in Casper library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Navigation (horizontal) from Casper

Tailwind CSS

Casper

<section x-data="{ mobileNavOpen: false }">
  <nav class="bg-white py-7">
    <div class="container mx-auto px-4">
      <div class="relative flex items-center justify-between">
        <a class="inline-block" href="#">
          <img class="h-10" src="casper-assets/logos/casper-logo.svg" alt="">
        </a>
        <div class="flex items-center justify-end">
          <div class="hidden lg:block mr-10"><a class="inline-flex py-2 px-4 mr-4 items-center justify-center text-sm font-medium uppercase text-violet-900 hover:text-violet-500" href="#">SIGN IN</a><a class="inline-flex h-11 py-2 px-4 items-center justify-center text-sm font-medium uppercase text-black hover:text-white bg-violet-500 hover:bg-violet-600 transition duration-200 rounded-full" href="#">SIGN UP</a></div>
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-black hover:text-violet-500">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 8H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M20 24L29 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-violet-900 opacity-20"></div>
    <nav class="relative flex flex-col py-7 px-10 w-full h-full bg-white overflow-y-auto">
      <div class="flex mb-auto items-center">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Casper Site Navigation Bar with Sign In and Sign Up

A light horizontal navigation header with the Casper logo on the left, text Sign In link and a rounded purple Sign Up button on the right, plus a hamburger menu icon. It provides primary site navigation and authentication entry points.