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

12k

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.4k
background animation
background animation

Author:
Anonymous

2 years ago

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

Author:
Ava Brown

2 years ago

13.5k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.5k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

683
Restaurant menu card

Author:
Anonymous

1 year ago

3.5k
Simple Payment Successfull Notification Page

Author:
Anonymous

5 months ago

1.1k
Chatbox template

Author:
Lucas Martinez

2 years ago

12.3k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

5 months ago

743
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

8 months ago

1.4k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

9 months ago

1.3k
hello world
by salvator

Author:
Anonymous

5 months ago

448

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components