Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="antialiased min-h-screen font-1 bg-gray-50">
  <div class="relative">
    <div class="md:mx-20" x-data="{ openMobileMenu: false }" x-on:click.away="openMobileMenu = false" x-cloak>
      <div class="relative pt-6 px-4">
        <nav class="relative flex items-center justify-around sm:h-10 w-full">
          <div class="flex items-center justify-between flex-1">
            <a href="#" aria-label="Home">
              <svg class="h-8 w-auto sm:h-10" fill="none" viewBox="0 0 35 32" xmlns="http://www.w3.org/2000/svg">
                <path fill="#5850EC" d="M15.258 26.865a4.043 4.043 0 01-1.133 2.917A4.006 4.006 0 0111.253 31a3.992 3.992 0 01-2.872-1.218 4.028 4.028 0 01-1.133-2.917c.009-.698.2-1.382.557-1.981.356-.6.863-1.094 1.47-1.433-.024.109.09-.055 0 0l1.86-1.652a8.495 8.495 0 002.304-5.793c0-2.926-1.711-5.901-4.17-7.457.094.055-.036-.094 0 0A3.952 3.952 0 017.8 7.116a3.975 3.975 0 01-.557-1.98 4.042 4.042 0 011.133-2.918A4.006 4.006 0 0111.247 1a3.99 3.99 0 012.872 1.218 4.025 4.025 0 011.133 2.917 8.521 8.521 0 002.347 5.832l.817.8c.326.285.668.551 1.024.798.621.33 1.142.826 1.504 1.431a3.902 3.902 0 01-1.504 5.442c.033-.067-.063.036 0 0a8.968 8.968 0 00-3.024 3.183 9.016 9.016 0 00-1.158 4.244zM19.741 5.123c0 .796.235 1.575.676 2.237a4.01 4.01 0 001.798 1.482 3.99 3.99 0 004.366-.873 4.042 4.042 0 00.869-4.386 4.02 4.02 0 00-1.476-1.806 3.994 3.994 0 00-5.058.501 4.038 4.038 0 00-1.175 2.845zM23.748 22.84c-.792 0-1.567.236-2.226.678a4.021 4.021 0 00-1.476 1.806 4.042 4.042 0 00.869 4.387 3.99 3.99 0 004.366.873A4.01 4.01 0 0027.08 29.1a4.039 4.039 0 00-.5-5.082 4 4 0 00-2.832-1.18zM34 15.994c0-.796-.235-1.574-.675-2.236a4.01 4.01 0 00-1.798-1.483 3.99 3.99 0 00-4.367.873 4.042 4.042 0 00-.869 4.387 4.02 4.02 0 001.476 1.806 3.993 3.993 0 002.226.678 4.003 4.003 0 002.832-1.18A4.04 4.04 0 0034 15.993z" />
                <path fill="#5850EC" d="M5.007 11.969c-.793 0-1.567.236-2.226.678a4.021 4.021 0 00-1.476 1.807 4.042 4.042 0 00.869 4.386 4.001 4.001 0 004.366.873 4.011 4.011 0 001.798-1.483 4.038 4.038 0 00-.5-5.08 4.004 4.004 0 00-2.831-1.181z" />
              </svg>
            </a>
            <div class="-mr-2 flex items-center" x-on:click="openMobileMenu = !openMobileMenu">
              <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
              </button>
            </div>
          </div>
        </nav>
      </div>

      <div x-on:click="openMobileMenu = false" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" :class="{'translate-y-0 shadow-md duration-150': openMobileMenu, '-translate-y-full': ! openMobileMenu}" class="fixed z-40 top-0 inset-0 transition transform origin-top bg-gradient-to-r from-green-200 to-blue-400 h-screen overflow-y-auto">
        <div class="relative bg-gray-800 shadow-md overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
          <!-- Menu Header -->
          <div class="border-b border-gray-500">
            <div class="md:mx-20 border-l border-gray-500">
              <div class="px-5 py-5 flex items-center justify-between">
                <a href="#" aria-label="Home">
                  <svg class="h-8 w-auto sm:h-10" fill="none" viewBox="0 0 35 32" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#5850EC" d="M15.258 26.865a4.043 4.043 0 01-1.133 2.917A4.006 4.006 0 0111.253 31a3.992 3.992 0 01-2.872-1.218 4.028 4.028 0 01-1.133-2.917c.009-.698.2-1.382.557-1.981.356-.6.863-1.094 1.47-1.433-.024.109.09-.055 0 0l1.86-1.652a8.495 8.495 0 002.304-5.793c0-2.926-1.711-5.901-4.17-7.457.094.055-.036-.094 0 0A3.952 3.952 0 017.8 7.116a3.975 3.975 0 01-.557-1.98 4.042 4.042 0 011.133-2.918A4.006 4.006 0 0111.247 1a3.99 3.99 0 012.872 1.218 4.025 4.025 0 011.133 2.917 8.521 8.521 0 002.347 5.832l.817.8c.326.285.668.551 1.024.798.621.33 1.142.826 1.504 1.431a3.902 3.902 0 01-1.504 5.442c.033-.067-.063.036 0 0a8.968 8.968 0 00-3.024 3.183 9.016 9.016 0 00-1.158 4.244zM19.741 5.123c0 .796.235 1.575.676 2.237a4.01 4.01 0 001.798 1.482 3.99 3.99 0 004.366-.873 4.042 4.042 0 00.869-4.386 4.02 4.02 0 00-1.476-1.806 3.994 3.994 0 00-5.058.501 4.038 4.038 0 00-1.175 2.845zM23.748 22.84c-.792 0-1.567.236-2.226.678a4.021 4.021 0 00-1.476 1.806 4.042 4.042 0 00.869 4.387 3.99 3.99 0 004.366.873A4.01 4.01 0 0027.08 29.1a4.039 4.039 0 00-.5-5.082 4 4 0 00-2.832-1.18zM34 15.994c0-.796-.235-1.574-.675-2.236a4.01 4.01 0 00-1.798-1.483 3.99 3.99 0 00-4.367.873 4.042 4.042 0 00-.869 4.387 4.02 4.02 0 001.476 1.806 3.993 3.993 0 002.226.678 4.003 4.003 0 002.832-1.18A4.04 4.04 0 0034 15.993z" />
                    <path fill="#5850EC" d="M5.007 11.969c-.793 0-1.567.236-2.226.678a4.021 4.021 0 00-1.476 1.807 4.042 4.042 0 00.869 4.386 4.001 4.001 0 004.366.873 4.011 4.011 0 001.798-1.483 4.038 4.038 0 00-.5-5.08 4.004 4.004 0 00-2.831-1.181z" />
                  </svg>
                </a>
                <div class="-mr-2">
                  <button x-on:click="openMobileMenu = !openMobileMenu" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-300 hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
                    <span class="uppercase tracking-wide font-medium text-gray-400 mr-1">Close</span>
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="md:ml-20 border-l border-gray-500 flex flex-col md:flex-row">
            <!-- Left Content -->
            <div class="md:w-2/3 md:border-r border-gray-500">
              <div class="border-b border-gray-500 text-sm px-5 py-3 uppercase tracking-wide font-semibold text-gray-400">Menu</div>

              <div class="px-2 py-4">
                <a href="#" class="block px-3 py-2 rounded-md text-3xl md:text-5xl lg:text-6xl tracking-tight uppercase font-medium text-gray-300 hover:text-indigo-600 hover:bg-transparent focus:outline-none focus:text-gray-200 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
                <a href="#" class="mt-1 block px-3 py-2 rounded-md text-3xl md:text-5xl lg:text-6xl tracking-tight uppercase font-medium text-gray-300 hover:text-indigo-600 hover:bg-transparent focus:outline-none focus:text-gray-200 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
                <a href="#" class="mt-1 block px-3 py-2 rounded-md text-3xl md:text-5xl lg:text-6xl tracking-tight uppercase font-medium text-gray-300 hover:text-indigo-600 hover:bg-transparent focus:outline-none focus:text-gray-200 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
                <a href="#" class="mt-1 block px-3 py-2 rounded-md text-3xl md:text-5xl lg:text-6xl tracking-tight uppercase font-medium text-gray-300 hover:text-indigo-600 hover:bg-transparent focus:outline-none focus:text-gray-200 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
              </div>
            </div>

            <!-- Right Content -->
            <div class="md:w-1/3 flex flex-col">
              <div class="border-b border-t md:border-t-0 border-gray-500 text-sm px-5 py-3 uppercase tracking-wide font-semibold text-gray-400">Social</div>

              <div class="py-2 md:py-0 md:divide-y md:divide-gray-500 flex flex-col flex-1">
                <a href="#" class="flex items-center flex-1 px-5 py-2 md:py-6 block text-xl font-medium text-gray-300 hover:text-indigo-600 focus:outline-none focus:text-gray-200 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Twitter</a>
                <a href="#" class="flex items-center flex-1 px-5 py-2 md:py-6 block text-xl font-medium text-gray-300 hover:text-indigo-600 focus:outline-none focus:text-gray-200 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Instagram</a>
                <a href="#" class="flex items-center flex-1 px-5 py-2 md:py-6 block text-xl font-medium text-gray-300 hover:text-indigo-600 focus:outline-none focus:text-gray-200 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">LinkedIn</a>
                <a href="#" class="flex items-center flex-1 px-5 py-2 md:py-6 block text-xl font-medium text-gray-300 hover:text-indigo-600 focus:outline-none focus:text-gray-200 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Pinterest</a>
              </div>
            </div>
          </div>

          <!-- Footer Content -->
          <div class="border-t border-gray-500">
            <div class="md:mx-20 border-l border-gray-500">
              <div class="px-5 py-4 text-gray-300 uppercase tracking-wide font-medium flex flex-col md:flex-row md:space-x-4 items-center">
                <div>
                  Created by <a class="text-indigo-500 hover:underline" href="https://twitter.com/mithicher">mithicher</a>
                </div>
                <div class="text-gray-500 hidden md:block">/</div>
                <div>
                  Made with <a class="text-indigo-500 hover:underline" href="https://tailwindcss.com/">TailwindCSS</a> &amp; <a class="text-indigo-500 hover:underline" href="https://github.com/alpinejs/alpine/">AlpineJS</a>.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="lg:max-w-4xl lg:w-full mx-auto py-32 lg:py-40">
    <main class="px-4 sm:px-6 lg:px-8">
      <div class="sm:text-center">
        <h2 class="mb-4 text-4xl tracking-tight leading-10 font-bold text-gray-800 sm:text-5xl sm:leading-none md:text-6xl lg:text-7xl">Navbar built with TailwindCSS &amp; AlpineJS</h2>
        <p>Inspired from Github Readme Page. <a href="https://github.com/readme/caleb-porzio" class="inline-block text-xl text-indigo-600 underline">https://github.com/readme/caleb-porzio</a></p>

        <div class="mt-4 flex space-x-2 items-center md:justify-center flex-1">
          <div>
            <a class="text-indigo-600 underline" href="https://twitter.com/mithicher">Twitter</a>
          </div>
          <div class="text-gray-400 hidden md:block">/</div>
          <div>
            <a class="text-indigo-600 underline" href="https://codepen.io/mithicher">Codepen</a>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console