Simple horizontal card carrousel in TailwindCSS
Last updated
Antonio Ufano
If you're looking for a simple way to create horizontal cards with TailwindCSS, this article is for you. This is what I'm building today 👇:
So if you want something similar and are not sure how to build this horizontal carrousel similar to the one used by Netflix with TailwindCSS, just keep reading 😉
Basic structure of the carrousel
The carrousel will be a div with the following classes: flex flex-no-wrap overflow-x-scroll scrolling-touch items-start mb-8. Here is why:
- flex: to display items with flexbox
- flex-no-wrap: it will avoid items to be moved to a next row
- overflow-x-scroll: will display the scrollbar if needed
- scrolling-touch: to scroll in touch screen
- items-start: to align items vertically to the top in case the item's heights are not equal
This carrousel will be the wrapper that contains all cards.
Classes for each card
Each item inside the carrousel will be a card and will have a container with the following classes: flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg. The important ones are:
- flex-none: will allow us to define a specific width for each item
- w-2/3 & md:2-1/3: will define the width of each card. We want a percentage that allows part of a card to be seen at the end.
- mr-8: to have some margin between items.
Inside each card, I included an image on top (using classes from the TailwindCSS aspect ratio plugin), a title and a summary, so this can be used for blog posts but you can use them for videos or whatever piece of content.
You can find the a full working example in the following CodePen or in the code below.
Let me know if you find it useful by reaching me on Twitter!
See the Pen Horizontal card carrousel TailwindCSS by Antonio (@uF4No) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container px-4 flex-grow w-full py-4 sm:py-16 mx-auto px-0">
<h1
class="text-center text-3xl mb-4 uppercase bg-white text-gray-700 mx-auto px-2"
>
Blog
</h1>
<div class="mx-auto w-full md:w-4/5 px-4">
<div class="container my-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-3xl font-medium">
Category one
<a href="#" class=""
><span
class="text-salmon font-medium text-lg ml-2 hover:underline"
>See all
</span></a
>
</h2>
<div>
<button
class="cursor-pointer text-xl mx-1 text-indigo-600 font-bold"
>
<<
</button>
<button
class="cursor-pointer text-xl mx-1 text-indigo-600 font-bold"
>
>>
</button>
</div>
</div>
<div
id="scrollContainer"
class="flex flex-no-wrap overflow-x-scroll scrolling-touch items-start mb-8"
>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
</div>
</div>
<!---->
<div class="container my-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-3xl">
Another category
<a href="#" class=""
><span
class="text-salmon font-medium text-lg ml-2 hover:underline"
>See all
</span></a
>
</h2>
<div>
<button
class="cursor-pointer text-xl mx-1 text-indigo-600 font-bold"
>
<<
</button>
<button
class="cursor-pointer text-xl mx-1 text-indigo-600 font-bold"
>
>>
</button>
</div>
</div>
<div
id="scrollContainer"
class="flex flex-no-wrap overflow-x-scroll scrolling-touch items-start mb-8"
>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
<div
class="flex-none w-2/3 md:w-1/3 mr-8 md:pb-4 border rounded-lg"
>
<a href="#" class="space-y-4">
<div class="aspect-w-16 aspect-h-9">
<img
class="object-cover shadow-md hover:shadow-xl rounded-lg"
src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixqx=3H1AJd0Pae&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
alt=""
/>
</div>
<div class="px-4 py-2">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="font-bold text-gray-800 text-3xl mb-2">
Some title goes here
</h3>
</div>
<div class="text-lg">
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ad recusandae, consequatur corrupti vel quisquam id itaque
nam
</p>
<p class="font-medium text-sm text-indigo-600 mt-2">
Read more<span class="text-indigo-600">…</span>
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you enjoyed this article consider sharing it on social media or buying me a coffee ✌️
Oh! and don't forget to follow me on Twitter where I share tons of dev tips 🤙
Other articles that might help you
my projects
Apart from writing articles in this blog, I spent most of my time working on my personal projects.
theLIFEBOARD.app
theLIFEBOARD is a weekly planner that helps people achieve their goals, create new habits and avoid burnout. It encourages you to plan and review each week so you can easily identify ways to improve your productivity while keeping track of your progress.
Sign up
SolidityTips.com
I'm very interested in blockchain, smart contracts and all the possiblilities chains like Ethereum can bring to the web. SolidityTips is a blog in which I share everything I learn about Solidity and Web3 development.
Check it out if you want to learn Solidity
Quicktalks.io
Quicktalks is a place where indie hackers, makers, creators and entrepreneurs share their knowledge, ideas, lessons learned, failures and tactics they use to build successfull online products and businesses. It'll contain recorded short interviews with indie makers.
Message me to be part of it