Home
Edward Carandang
Simple layout

Simple layout

This tailwind example is contributed by Edward Carandang, on 08-May-2024. Component is made with Tailwind CSS v3.

<body class="flex h-screen bg-gray-100">
    
    <div class="flex flex-col w-full">
        
        <header class="bg-blue-500 text-white p-4 text-lg flex justify-between items-center">
            <button id="toggleSidebar" class="mr-4">Toggle Sidebar</button>
            Application Name
        </header>

<div class="flex flex-1 overflow-hidden">
            
            <nav id="sidebar" class="bg-blue-700 space-y-2 py-4 px-3 overflow-y-auto w-64">
                <a href="#" class="block py-2 px-4 text-white">Home</a>
                <a href="#" class="block py-2 px-4 text-white">Profile</a>
                <a href="#" class="block py-2 px-4 text-white">Settings</a>
                
            </nav>

<div class="flex-1 flex flex-col overflow-hidden">
                
                <div class="bg-gray-50 p-4 border-b">
                    <span>Home > Dashboard</span>
                </div>
                
                <div class="flex-1 overflow-y-auto p-4">
                    <div style="height: 100%; background-color: #ff0000;">Content of the page here. This area is scrollable.</p>
                </div>
            </div>
        </div>
    </div>

<script>
        document.getElementById('toggleSidebar').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            if (sidebar.classList.contains('w-64')) {
                sidebar.classList.remove('w-64');
                sidebar.classList.add('w-16');
            } else {
                sidebar.classList.remove('w-16');
                sidebar.classList.add('w-64');
            }
        });
    </script>
</body>

Related Examples

pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

2 weeks ago

19
Simple dialpad

Author:
Brandon D

2 years ago

11.4k
Snake Game tailwind
snake game

Author:
QQ-VVN

9 months ago

752
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Author:
Omer fils ELENGA

1 month ago

314
Full Page loading overlay

Author:
Bunny

2 years ago

12.3k
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.8k
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

8 months ago

874
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

9 months ago

1.3k
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

7 months ago

825
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

7 months ago

827
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

3 months ago

328

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components