Skip to content

Instantly share code, notes, and snippets.

@pavelbinar

pavelbinar/application-layout.html

Last active February 6, 2023 10:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pavelbinar/2e74f20e3045c9271c10d10d063ac9a8 to your computer and use it in GitHub Desktop.
Save pavelbinar/2e74f20e3045c9271c10d10d063ac9a8 to your computer and use it in GitHub Desktop.
Download ZIP
Slack like layout done in Tailwindcss
Raw
application-layout.html
<!-- Example: https://play.tailwindcss.com/Q2pbgywiES -->
<div class="flex h-screen">
<div class="h-full w-16 bg-gray-200 p-4">Sidebar 1</div>
<div class="h-full w-48 bg-gray-300 p-4">Sidebar 2</div>
<div class="h-full flex-1 bg-yellow-300 p-4 overflow-auto">
<h1 class="text-4xl">Content</h1>
<p class="my-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perspiciatis molestias adipisci eius fugit voluptatem dicta minima dolores, expedita repellat illo eligendi iure possimus assumenda, tenetur ab. Ea eaque sint dolore dolor commodi ut repudiandae accusantium nemo dolores quo reiciendis nihil, quae suscipit modi vitae eos molestiae. Cumque soluta, provident, earum laudantium beatae temporibus perspiciatis vitae pariatur quam ea fugit libero culpa placeat autem quisquam porro dolore dicta quasi animi tenetur aspernatur odit consectetur sed? Corrupti magni culpa officiis alias quo, nam ut laudantium ab illum perspiciatis vero placeat maxime corporis iure illo quod omnis quidem et harum praesentium? Eveniet.</p>
<p class="my-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perspiciatis molestias adipisci eius fugit voluptatem dicta minima dolores, expedita repellat illo eligendi iure possimus assumenda, tenetur ab. Ea eaque sint dolore dolor commodi ut repudiandae accusantium nemo dolores quo reiciendis nihil, quae suscipit modi vitae eos molestiae. Cumque soluta, provident, earum laudantium beatae temporibus perspiciatis vitae pariatur quam ea fugit libero culpa placeat autem quisquam porro dolore dicta quasi animi tenetur aspernatur odit consectetur sed? Corrupti magni culpa officiis alias quo, nam ut laudantium ab illum perspiciatis vero placeat maxime corporis iure illo quod omnis quidem et harum praesentium? Eveniet.</p>
<p class="my-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perspiciatis molestias adipisci eius fugit voluptatem dicta minima dolores, expedita repellat illo eligendi iure possimus assumenda, tenetur ab. Ea eaque sint dolore dolor commodi ut repudiandae accusantium nemo dolores quo reiciendis nihil, quae suscipit modi vitae eos molestiae. Cumque soluta, provident, earum laudantium beatae temporibus perspiciatis vitae pariatur quam ea fugit libero culpa placeat autem quisquam porro dolore dicta quasi animi tenetur aspernatur odit consectetur sed? Corrupti magni culpa officiis alias quo, nam ut laudantium ab illum perspiciatis vero placeat maxime corporis iure illo quod omnis quidem et harum praesentium? Eveniet.</p>
<p class="my-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perspiciatis molestias adipisci eius fugit voluptatem dicta minima dolores, expedita repellat illo eligendi iure possimus assumenda, tenetur ab. Ea eaque sint dolore dolor commodi ut repudiandae accusantium nemo dolores quo reiciendis nihil, quae suscipit modi vitae eos molestiae. Cumque soluta, provident, earum laudantium beatae temporibus perspiciatis vitae pariatur quam ea fugit libero culpa placeat autem quisquam porro dolore dicta quasi animi tenetur aspernatur odit consectetur sed? Corrupti magni culpa officiis alias quo, nam ut laudantium ab illum perspiciatis vero placeat maxime corporis iure illo quod omnis quidem et harum praesentium? Eveniet.</p>
<p class="my-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perspiciatis molestias adipisci eius fugit voluptatem dicta minima dolores, expedita repellat illo eligendi iure possimus assumenda, tenetur ab. Ea eaque sint dolore dolor commodi ut repudiandae accusantium nemo dolores quo reiciendis nihil, quae suscipit modi vitae eos molestiae. Cumque soluta, provident, earum laudantium beatae temporibus perspiciatis vitae pariatur quam ea fugit libero culpa placeat autem quisquam porro dolore dicta quasi animi tenetur aspernatur odit consectetur sed? Corrupti magni culpa officiis alias quo, nam ut laudantium ab illum perspiciatis vero placeat maxime corporis iure illo quod omnis quidem et harum praesentium? Eveniet.</p>
<p class="my-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perspiciatis molestias adipisci eius fugit voluptatem dicta minima dolores, expedita repellat illo eligendi iure possimus assumenda, tenetur ab. Ea eaque sint dolore dolor commodi ut repudiandae accusantium nemo dolores quo reiciendis nihil, quae suscipit modi vitae eos molestiae. Cumque soluta, provident, earum laudantium beatae temporibus perspiciatis vitae pariatur quam ea fugit libero culpa placeat autem quisquam porro dolore dicta quasi animi tenetur aspernatur odit consectetur sed? Corrupti magni culpa officiis alias quo, nam ut laudantium ab illum perspiciatis vero placeat maxime corporis iure illo quod omnis quidem et harum praesentium? Eveniet.</p>
<p class="my-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perspiciatis molestias adipisci eius fugit voluptatem dicta minima dolores, expedita repellat illo eligendi iure possimus assumenda, tenetur ab. Ea eaque sint dolore dolor commodi ut repudiandae accusantium nemo dolores quo reiciendis nihil, quae suscipit modi vitae eos molestiae. Cumque soluta, provident, earum laudantium beatae temporibus perspiciatis vitae pariatur quam ea fugit libero culpa placeat autem quisquam porro dolore dicta quasi animi tenetur aspernatur odit consectetur sed? Corrupti magni culpa officiis alias quo, nam ut laudantium ab illum perspiciatis vero placeat maxime corporis iure illo quod omnis quidem et harum praesentium? Eveniet.</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment