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

<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

Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

21.1k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

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

7 months ago

378
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

7 months ago

843
Terms of Service Page Template

Author:
Anonymous

1 year ago

2.2k
walletp2p

Author:
Anonymous

1 year ago

1.4k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.7k
hello world
by salvator

Author:
Anonymous

8 months ago

535
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

1 year ago

2.1k
Apple Dock Navigation Bar

Author:
Cristian

1 year ago

1.9k
responsive home page
the best home page

Author:
irahoza daniel

7 months ago

967
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

6 months ago

693

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components