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.

2.5k

<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

delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

4 months ago

299
Checkbox
Checkbox

Author:
Aman kumar

1 year ago

1.8k
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

4 months ago

421
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

Author:
INGRIDE MUZIRANENGE

4 months ago

307
blockquote

Author:
Freja Jensen

2 years ago

9.7k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

3 months ago

219
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

2 months ago

307
hello world
by salvator

Author:
Anonymous

4 months ago

369
Restaurant menu card

Author:
Anonymous

1 year ago

3.4k
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)

4 months ago

754
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

Author:
SAURAV SINGH

2 months ago

154
Neon container

Author:
Anonymous

1 year ago

3.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components