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

11.2k

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

8.9k
background animation
background animation

Author:
Anonymous

1 year ago

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

Author:
Ava Brown

1 year ago

12.6k
Collapsible content

Author:
Rafferty Kim

2 years ago

13k
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

431
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

2 weeks ago

317
Age verification 18+

Author:
Maxim

3 months ago

439
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

248
Payment Cards

Author:
Shammi Nethupul

8 months ago

1.8k
Simple dialpad

Author:
Brandon D

1 year ago

10.9k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

2 months ago

617
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

5 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components