I am having alot of trouble with tailwind at the moment. So I have these 3 cards underneath Trending Tours and I need them to turn into a row after a certain break point. Not only that, I need a way for space to be between these cards. To me, everything looks set up for that as set objects but it's not working and I'm struggling to find a solution. Please help.
<title>Ready Set Travel</title>
</head>
<body class="flex justify-center w-full"">
<div class="container flex-col justify-center items-center max-w-6xl">
<nav class="flex justify-around bg-slate-100 w-full m-0 px-2 py-4 items-center text-slate-900 >
<a href="/dev/readysettravel/index.html"><img class="w-auto h-4 lg:h-6" src="/dev/readysettravel/img/ReadySetTravel.png"></a>
<div class="navlinks flex justify-between items-center text-xs lg:text-lg">
<a class="px-2 sm:px-4"href="/dev/readysettravel/index.html">About</a>
<a class="px-2 sm:px-4" href="/dev/readysettravel/index.html">Destinations</a>
<a class="px-2 sm:px-4" href="/dev/readysettravel/index.html">Tours</a>
<a class="px-2 sm:px-4" href="/dev/readysettravel/index.html">Blog</a>
<a href="/dev/readysettravel/index.html"><button class="button px-4 py-2 ml-4 bg-orange-400 text-white font-medium drop-shadow-md lg:text-lg lg:ml-10">Book a Trip</button></a>
</div>
</nav>
<header class="bg-[url('/dev/readysettravel/img/hero-bg.jpg')] bg-center bg-cover m-0 p-20 text-white">
<div class="heading flex flex-col justify-start">
<h1 class="font-bold pb-2 text-4xl md:pb-0">Book the trip of a lifetime</h1>
<h4 class="text-sm">Get the best advice and tips for your dream trip</h4>
</div>
</header>
<div class=" ">
<section class="searchbox flex flex-col justify-center mx-2 my-3 sm:mx-30 md:my-4 lg:mx-32">
<div class="flex flex-col items-center justify-center bg-cyan-900 pt-3 pb-6 sm:px-10">
<h2 class="text-white font-semibold text-xl pb-3">Where do you want to go?</h2>
<div class="text-sm flex justify-center">
<input class="bg-white w-80 h-8 " type="search" placeholder="Enter a destination">
<button class="bg-orange-400 text-white h-8 w-24 text-center">Search</button>
</div>
</div>
</section>
<section class=" bg-slate-100 my-2">
<div class="flex flex-col justify-center items-center text-zinc-900 py-3 md:my-4">
<h2 class="font-bold text-3xl">Trending Tours</h2>
<p class="text-sm">Get out there and experience some adventure!</p>
</div>
<div class="cards mt-2 flex flex-col ">
<div class="card1 flex flex-col justify-center items-center drop-shadow-md">
<img class="w-80" src="/dev/readysettravel/img/tour-mountainHiking.jpg" alt="person hiking on Alps mountain">
<div class="bg-white">
<div class="flex flex-col justify-start items-start pt-4 pl-6 pb-3">
<h4 class="font-semibold text-sm">Alps Mountain Hiking Tour</h4>
<p class="text-xs text-gray-400">4 days | 10 stops</p>
</div>
<div class="flex flex-row space-around pl-6 pb-4 px-5 bg-white">
<h3 class="font-bold text-xl pr-28">$ 1,500</h4>
<button class="bg-orange-400 text-white h-8 w-24 text-center">Book Now</button>
</div>
</div>
<div class="card1 flex flex-col justify-center items-center drop-shadow-md">
<img class="w-80" src="/dev/readysettravel/img/tour-mountainHiking.jpg" alt="person hiking on Alps mountain">
<div class="bg-white">
<div class="flex flex-col justify-start items-start pt-4 pl-6 pb-3">
<h4 class="font-semibold text-sm">Alps Mountain Hiking Tour</h4>
<p class="text-xs text-gray-400">4 days | 10 stops</p>
</div>
<div class="flex flex-row space-around pl-6 pb-4 px-5 bg-white">
<h3 class="font-bold text-xl pr-28">$ 1,500</h4>
<button class="bg-orange-400 text-white h-8 w-24 text-center">Book Now</button>
</div>
</div>
<div class="card1 flex flex-col justify-center items-center drop-shadow-md">
<img class="w-80" src="/dev/readysettravel/img/tour-mountainHiking.jpg" alt="person hiking on Alps mountain">
<div class="bg-white">
<div class="flex flex-col justify-start items-start pt-4 pl-6 pb-3">
<h4 class="font-semibold text-sm">Alps Mountain Hiking Tour</h4>
<p class="text-xs text-gray-400">4 days | 10 stops</p>
</div>
<div class="flex flex-row space-around pl-6 pb-4 px-5 bg-white">
<h3 class="font-bold text-xl pr-28">$ 1,500</h4>
<button class="bg-orange-400 text-white h-8 w-24 text-center">Book Now</button>
</div>
</div>
</div>
</section>
<div class="card1 …"> syntax. It seems like you are not closing this element before starting another instance of one.max-lg: variant to flex-col to be max-lg:flex-col. This will make flex-direction: column apply up until lg breakpoint. Alternatively, you could keep flex-col and add lg:flex-row for the same effect. lg is an arbitrary breakpoint I picked and can be replaced with the one you'd prefer.lg:gap-4 to add spacing to the cards. 4 can be replaced with the amount of spacing you'd prefer.<script src="https://cdn.tailwindcss.com"></script>
<section class=" bg-slate-100 my-2 ">
<div class="flex flex-col justify-center items-center text-zinc-900 py-3 md:my-4 ">
<h2 class="font-bold text-3xl ">Trending Tours</h2>
<p class="text-sm ">Get out there and experience some adventure!</p>
</div>
<div class="cards mt-2 flex max-lg:flex-col lg:gap-4">
<div class="card1 flex flex-col justify-center items-center drop-shadow-md ">
<img class="w-80 " src="https://picsum.photos/1000/1000" alt="person hiking on Alps mountain ">
<div class="bg-white ">
<div class="flex flex-col justify-start items-start pt-4 pl-6 pb-3 ">
<h4 class="font-semibold text-sm ">Alps Mountain Hiking Tour</h4>
<p class="text-xs text-gray-400 ">4 days | 10 stops</p>
</div>
<div class="flex flex-row space-around pl-6 pb-4 px-5 bg-white ">
<h3 class="font-bold text-xl pr-28 ">$ 1,500</h4>
<button class="bg-orange-400 text-white h-8 w-24 text-center ">Book Now</button>
</div>
</div>
</div>
<div class="card1 flex flex-col justify-center items-center drop-shadow-md ">
<img class="w-80 " src="https://picsum.photos/1000/1000" alt="person hiking on Alps mountain ">
<div class="bg-white ">
<div class="flex flex-col justify-start items-start pt-4 pl-6 pb-3 ">
<h4 class="font-semibold text-sm ">Alps Mountain Hiking Tour</h4>
<p class="text-xs text-gray-400 ">4 days | 10 stops</p>
</div>
<div class="flex flex-row space-around pl-6 pb-4 px-5 bg-white ">
<h3 class="font-bold text-xl pr-28 ">$ 1,500</h4>
<button class="bg-orange-400 text-white h-8 w-24 text-center ">Book Now</button>
</div>
</div>
</div>
<div class="card1 flex flex-col justify-center items-center drop-shadow-md ">
<img class="w-80 " src="https://picsum.photos/1000/1000" alt="person hiking on Alps mountain ">
<div class="bg-white ">
<div class="flex flex-col justify-start items-start pt-4 pl-6 pb-3 ">
<h4 class="font-semibold text-sm ">Alps Mountain Hiking Tour</h4>
<p class="text-xs text-gray-400 ">4 days | 10 stops</p>
</div>
<div class="flex flex-row space-around pl-6 pb-4 px-5 bg-white ">
<h3 class="font-bold text-xl pr-28 ">$ 1,500</h4>
<button class="bg-orange-400 text-white h-8 w-24 text-center ">Book Now</button>