Skip to content

Instantly share code, notes, and snippets.

@BjornDCode
Created February 3, 2020 11:58
Show Gist options
  • Save BjornDCode/5cb836a6b23638d6d02f5cb6ed59a04a to your computer and use it in GitHub Desktop.
Save BjornDCode/5cb836a6b23638d6d02f5cb6ed59a04a to your computer and use it in GitHub Desktop.
Tailwind - Fixed sidebar, scrollable content
// Source: https://twitter.com/calebporzio/status/1151876736931549185
<div class="flex">
<aside class="h-screen sticky top-0">
// Fixed Sidebar
</aside>
<main>
// Content
</main>
</div>
@Daftscientist
Copy link

I come back here so frequently. Thanks.

@mredaoudi
Copy link

Life saver!

@davidbirkin
Copy link

Thank You

@NisugaJ
Copy link

NisugaJ commented Dec 24, 2023

Thanks

@mk3-14159
Copy link

Thank you

@Matheuschimendes
Copy link

Thank you !

@kodunmi
Copy link

kodunmi commented Jul 29, 2024

<div class="grid grid-cols-7">
    <aside class="self-start sticky top-0 col-span-1">
        // Fixed Sidebar
    </aside>
    
    <main class="col-span-6">
        // Content
    </main>
</div>

This is perfect

@mirola777
Copy link

te amo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment