LogoJuan Manuel Allo Ron

Common CSS layouts in Tailwind

By Juan Manuel Allo Ron on Jul 12, 2024
A css stylesheet

A little while ago, the Chrome team unveiled a fascinating article on 10 one-line layouts with CSS. It quickly became my go-to reference, but here’s the twist – I discovered myself reconstructing these layouts with Tailwind every single time.

Now, I’m thrilled to bring you the very same 10 one-line layouts, meticulously reconstructed using Tailwind CSS classes. Let’s dive into the seamless fusion of style and simplicity! 🚀

01. Super Centered

02. The Deconstructed Pancake

03. Sidebar Says

04. Pancake Stack

05. Classic Holy Grail Layout

06. 12-Span Grid

07. RAM (Repeat, Auto, MinMax)

08. Line Up

09. Clamping My Style

10. Respect for Aspect


Catch up with me on X (twitter):@juan_allo

Web
Frontend
Coding
Css
Tailwind

Share

X Facebook Y Combinator LinkedIn Reddit Email

---

Similar Articles

An Artificial intelligence solving JS challenges in a computer

7 days of JS by ChatGPT

Jun 12, 2024
I decided to team up with ChatGPT to create a 7-day JavaScript challenge, inspired by the popular 30 days of JS. The results? Truly amazing!
Drum Kit player UI

Teaching LLMs to play the drums

May 12, 2024
In this experiment I created a text notation so ChatGPT, Claude.AI and Bard could create some music with it
Astro's official themes showcase site

Astro Themes and Templates to Power Your Next Build

Apr 3, 2024
Looking for themes and templates to style your Astro site? There are lots of great places to start. Save hours of aimless searching with my handpicked collection

Weekly Digest #5: 100 days of code

Apr 19, 2020
100 days of code was started by Alexander Kallaway in 2016 but recently it has been gaining more momentum (we all know why). Practice is the only way to master any discipline...

@2025 Juan Manuel Allo Ron. All Rights reserved