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.3k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.7k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.8k
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

1 year ago

1.6k
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

1 year ago

1.6k
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

7 months ago

635
admin panel

Author:
Anonymous

1 year ago

2.6k
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

8 months ago

1.3k
Dionysus AI Chat

Author:
Maxim

3 months ago

551
Product cards
Product cards for eCommerce

Author:
ehmasuk

2 months ago

402
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

2 years ago

10.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components