我正在使用TailWind与叶片模板在laravel，我如何才能使这些卡像在引导程序，我的意思是每三个项目在一列：

@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 bg-whit 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>
                    @empty
                        <h1 class="text-center">There is no Products</h1>

                    @endforelse

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