Home
Ahmed Malik
Responsive layout with header, main body, aside (sidebar) and footer

Responsive layout with header, main body, aside (sidebar) and footer

This tailwind example is contributed by Ahmed Malik, on 04-Apr-2023. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Ahmed Malik

12.4k

Fork Fullscreen

<div class="container m-auto grid grid-cols-4 gap-1 text-white md:grid-cols-12">
    <header class="col-span-full bg-slate-600 p-4">Header</header>
    <main class="col-span-4 bg-slate-600 p-4 md:col-span-8">
        <p>
            Vestibulum bibendum, purus at euismod dictum, mi enim dapibus turpis, at accumsan tellus sapien ac eros.
            Vestibulum venenatis ipsum ex, sed tincidunt libero tincidunt in. Nunc cursus massa ac urna hendrerit
            efficitur. Cras sodales nisl nibh, sed aliquet sem volutpat quis. Etiam tempus pellentesque velit, vitae
            commodo tortor efficitur vel. In hac habitasse platea dictumst. Proin posuere, odio sit amet efficitur
            vulputate, est orci semper justo, at consequat ante nulla facilisis urna. Morbi viverra lobortis porta. Duis
            facilisis, ipsum in egestas elementum, turpis arcu interdum lacus, vel lacinia lorem leo sit amet erat.
            Proin interdum, neque ut porta luctus, nisi ipsum scelerisque leo, ac facilisis lacus nibh at nisl.
        </p>
        <p class="mt-12">
            Vestibulum bibendum, purus at euismod dictum, mi enim dapibus turpis, at accumsan tellus sapien ac eros.
            Vestibulum venenatis ipsum ex, sed tincidunt libero tincidunt in. Nunc cursus massa ac urna hendrerit
            efficitur. Cras sodales nisl nibh, sed aliquet sem volutpat quis. Etiam tempus pellentesque velit, vitae
            commodo tortor efficitur vel. In hac habitasse platea dictumst. Proin posuere, odio sit amet efficitur
            vulputate, est orci semper justo, at consequat ante nulla facilisis urna. Morbi viverra lobortis porta. Duis
            facilisis, ipsum in egestas elementum, turpis arcu interdum lacus, vel lacinia lorem leo sit amet erat.
            Proin interdum, neque ut porta luctus, nisi ipsum scelerisque leo, ac facilisis lacus nibh at nisl.
        </p>

</main>
    <aside class="col-span-4 bg-slate-600 p-4">aside</aside>
    <footer class="col-span-full bg-slate-600 p-4 min-h-[120px]">Footer</footer>
</div>

Related Examples

simple responsive blog layout with sidebar

Author:
Isabella Kowalski

3 years ago

9.6k
background animation
background animation

Author:
Anonymous

2 years ago

50.8k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.9k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.9k
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

9 months ago

629
background animation
background animation

Author:
Anonymous

3 months ago

306
Heading Style

Author:
KULDEEP

8 months ago

509
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

6 months ago

592
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.1k
Snake Game tailwind
snake game

Author:
QQ-VVN

9 months ago

904
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

6 months ago

646
Atlas AI Analyst Workspace
A premium, document-centric AI chat interface that moves beyond standard bubbles into a professional "editor" layout. Designed for power users, it features a floating glassmorphic command bar, a dedicated "Memory & Context" sidebar with interactive widgets, and rich data visualization blocks. The aesthetic combines a deep charcoal base with luxury bronze/orange accents, making it ideal for high-end SaaS tools, financial analysis dashboards, or enterprise AI assistants.

Author:
Hamza Atig

2 months ago

117

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components