DNN Blogs

Written for the Community, by the Community

How to quickly make horizontal, scrollable cards in Tailwind CSS

Written By Aaron Lopez
2022-07-06

This is crossposted from my blog at Wolf X Machina: https://wolfxmachina.com/blog/category/how-to/how-to-quickly-make-horizontal-scrollable-cards-in-tailwind-css

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.

More about Wolf X Machina Read more posts by Aaron

Published
2022-07-06
Share
Written By
Aaron Lopez

I am the founder of Wolf X Machina Interface Development, a web and app development agency in British Columbia, Canada. My team and I have been working in DNN since 2006 where we create custom designs, skins, 2sxc apps, and mobile apps.

User Experience and beautiful designs are the most important aspects to my clients so it's where I put a lot of focus. Pixel perfect designs and maximally editable content is something I strive for on every project.

My team and I also build hybrid apps using Ionic and integrated with DNN as a back-end.

Please visit our website at www.wolfxmachina.com

Tags
Tailwind CSS
Total: 0 Comment(s)

Would you like to help us?

Awesome! Simply post in the forums using the link below and we'll get you started.

Get Involved