Home
Michael Andreuzza
Sidebar with Tailwind CSs and alpinejs

Sidebar with Tailwind CSs and alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Header Sidebar

Author Michael Andreuzza

3.6k

Fork Fullscreen

<div class="bg-white">
 
 <div x-data="{ open: false }" @keydown.window.escape="open = false">
  
  <div x-show="open" class="relative z-50" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." x-ref="dialog" aria-modal="true" style="display: none;">
   
   <div x-show="open" class="fixed inset-0 bg-teal-900/50" x-description="Off-canvas menu backdrop, show/hide based on off-canvas menu state." style="display: none;"></div>
   
   <div class="fixed inset-0 flex">
    <div x-show="open" x-description="Off-canvas menu, show/hide based on off-canvas menu state." class="relative mr-16 flex w-full max-w-lg flex-1" @click.away="open = false" style="display: none;">
     
     <div x-show="open" x-description="Close button, show/hide based on off-canvas menu state." class="absolute left-full top-0 flex w-16 justify-center pt-5" style="display: none;">
       <button type="button" class="-m-2.5 p-2.5" @click="open = false">
        <span class="sr-only">Close sidebar</span> 
        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
       </svg>
      </button>
     </div>
     <!--
                // Navigation list within the sidebar
                // Styling for the navigation container
                // Styling for navigation links
                // Dynamically generate menu items

-->
     <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-black px-6 pb-2">
      <nav class="flex flex-1 flex-col pt-6">
       <ul role="list" class="flex flex-1 flex-col justify-center gap-y-7 text-3xl text-white uppercase lg:text-6xl">
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Work</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Stack</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Store</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ News</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Blog</a> </li>
       </ul>
      </nav>
     </div>
    </div>
   </div>
  </div>
  
  <div class="sticky top-0 z-40 flex justify-start gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-10">
    <button type="button" class="-m-2.5 p-2.5 text-neutral-700" @click="open = true">
     <span class="sr-only">Open sidebar</span>  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
    </svg>
   </button>
   Lexington
  </div> 
  <main class="py-4 px-10 h-screen">
   
   <p class="text-xl  z-20 top-10 left-10 text-black uppercase">
    Your content goes here
   </p> 
   <div class="grid grid-cols-3 gap-2 h-full rounded-3xl overflow-hidden">
     <img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png"><img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png"><img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png">
   </div>
  </main> 
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8 ">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create a responsive sidebar with Astro, Tailwind CSS, and Alpine.js
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-sidebar-navigation-with-tailwindcss-and-alpine-js/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/pricing-table/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</div>

Resources1× 0.5× 0.25×Rerun

Related Examples

Basic sidebar

Author:
Rajesh Maheshwari

9 months ago

1.9k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

9 months ago

4.9k
Sidebar with only icons

Author:
Rajesh Maheshwari

9 months ago

1.9k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

6 months ago

930
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

932
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

6 months ago

676
Header + simple Hero Section

Author:
ABDO-SY

10 months ago

1.9k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

972
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

3 weeks ago

189
gallary
html , css

Author:
Hacker Development

7 months ago

543
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

958
sidebar elastico

Author:
Raul antonio de la cruz hernandez

5 months ago

416

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components