Skip Navigation

How to quickly make horizontal, scrollable cards in Tailwind CSS

Posted in How To on July 6, 2022

A common design pattern that has been showing up are horizontal, scrollable cards. I want to show you how that's done.

This kind of design pattern is really useful as it allows us to keep the page snappy while still fitting in lots of good content. So instead of long scrolling pages because of lots of cards, we just make the cards scrollable horizontally. 

In this 6 minute video, I show you how you can make horizontal, scrollable cards easily without JavaScript and just a tiny bit of CSS using Tailwind CSS.

It's really that easy. I hope you benefit from this and if you ever need help creating super tight user interfaces, contact us at

Aaron Lopez

Aaron Lopez

Founder & Lead Developer at Wolf X Machina

See what we can do for you

Our Services

Wolf X Machina Interface Development logo

Wolf X Machina is a team of developers and designers located in Victoria, BC and Saskatoon, SK. We've completed projects for very recognizable brands and our work is used by hundreds of thousands of people around the world.