Tailwind Drawer without JS

Tailwind

A pure Tailwind CSS drawer component that toggles using the peer-has-checked and has-checked utility classes. Lightweight, accessible, and fully responsive without any JavaScript.

No JavaSript

Easy to customize

Simple & Smooth

Demo

Drawer Button

👋 Drawer Content

Code

<!-- button -->
<label class="peer group">
    <!-- hidden checkbox -->
    <input type="checkbox" class="hidden" />
    
    <!-- button -->
    <div class="bg-gray-800 shadow text-white px-4 py-1 rounded-lg cursor-pointer hover:opacity-90">Drawer Button</div>

    <!-- black pane -->
    <div class="absolute inset-0 bg-gray-800/80 pointer-events-none transition-opacity duration-300 opacity-0 group-has-checked:opacity-100 group-has-checked:pointer-events-auto"></div>
</label>

<!-- drawer -->
<div class="p-5 bg-white fixed left-0 top-0 bottom-0 w-2/3 lg:w-1/2 shadow-lg transition-transform duration-300 -translate-x-full peer-has-checked:translate-x-0">👋 Drawer Content</div>

Hey, my name is Zeal. I built this website to share my works. Hope you like them!

Last Update

2025-04-25