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.2k

<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

Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

2 months ago

338
Moving Background Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

2.1k
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

3 weeks ago

45
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

5 months ago

911
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3k
htmlcss3

Author:
Anonymous

3 weeks ago

28
Fake Medicine Detector
Fake Medicine Detector

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

112
NFT Header with Hero

Author:
Abdul Baset Bappy

3 weeks ago

236
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.2k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.2k
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

4 weeks ago

278
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

5 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components