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.

3.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