Creating a Bootstrap-like grid system in TailwindCSS

Question

I am using Tailwind with the Blade template in Laravel. How can I create cards like in Bootstrap, where there are three items per row?

@section('content')
<div class="flex justify-center">
  <div class="w-8/12 bg-white p-6 rounded-lg mt-10">

    @forelse($products as $product)
    <!-- Box -->
    <div class="md:flex md:justify-center md:space-x-8 md:px-14">
      <!-- box-1 -->
      <div class="mt-16 py-4 px-4 w-72 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-110 transition duration-500 mx-auto md:mx-0">
        <div class="w-sm">
          <img class="w-64" src="{{ asset('storage/images/products/' . $product->image) }}" alt="" />
          <div class="mt-4 text-green-600 text-center">
            <h1 class="text-xl font-bold">{{ $product->name }}</h1>
            <div class="mt-4 text-gray-600">{{ $product->info }}</div>
            <div class="mt-4 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-300 text-green-800">{{ $product->category->name }}</div>
            <button class="mt-8 mb-4 py-2 px-14 rounded-full bg-green-600 text-white tracking-widest hover:bg-green-500 transition duration-200">MORE</button>
          </div>
        </div>
      </div>
    </div>
    
    @empty
    <h1 class="text-center">There are no products</h1>
    
    @endforelse

    <div>{{ $products->links() }}</div>
  </div>
</div>

@endsection

Answer 1

    <div class="container mx-auto">
  <div class="grid grid-cols-12 gap-1">
    <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
    <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
    <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
  </div>
</div>