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

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

2 years ago

9.5k
background animation
background animation

Author:
Anonymous

2 years ago

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

Author:
Ava Brown

2 years ago

13.8k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.9k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

3 months ago

218
Chat Bot

Author:
Md. Tofayel islam

6 months ago

782
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

9 months ago

1.8k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

6 months ago

442
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

5 months ago

521
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
random design

Author:
QQ-VVN

9 months ago

518
background animation
background animation

Author:
Anonymous

2 months ago

91

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components