TailwindsCSS Responsive Commission Widget

<div class="pt-5 px-5 justify-center">

<div class="col-span-1 bg-black bg-opacity-70 rounded xl tracking-widest pt-2 ">
  <div class=" p-5 lg:max-w-7xl lg:px-8">
<b class=" font-light text-3xl text-white tracking-widest">COMMISSIONS</b>
<hr class="mt-3">
    <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 xl:gap-x-8">

<a href="YOURLINKHERE" class="group pt-5" rel="nofollow">
        <div class="overflow-hidden xl:aspect-w-8 xl:aspect-h-8 aspect-w-1 aspect-h-1 w-full">
          <img src="https://images.unsplash.com/photo-1581592487771-f6d73a4e9344?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" class="rounded h-60 w-full object-center object-cover group-x transition duration-500 hover:opacity-50">
        </div>
      <p class="mt-1 text-xl text-white font-semibold">Lorem Ipsum - Title</p>
        <p class="mt-1 mb-1 text-m text-white font-light italic"> $500-$700</p>
        <hr>
        <p class="text-sm w-full mb-1 mt-1 text-gray-400 tracking-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet imperdiet metus.</p>
        <hr class="mb-3">
        <p class="bg-black bg-opacity-40 hover:bg-opacity-70 duration-500 text-center text-white font-light py-2 rounded w-full tracking-wider">
  BUTTON TITLE
</p>
      </a>

       <a href="YOURLINKHERE" class="group pt-5" rel="nofollow">
        <div class="overflow-hidden xl:aspect-w-8 xl:aspect-h-8 aspect-w-1 aspect-h-1 w-full">
          <img src="https://images.unsplash.com/photo-1582561833407-b95380302a43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=455&q=80" class="rounded h-60 w-full object-center object-cover group-x transition duration-500 hover:opacity-50">
        </div>
      <p class="mt-1 text-xl text-white font-semibold">Lorem Ipsum - Title</p>
        <p class="mt-1 mb-1 text-m text-white font-light italic"> $500-$700</p>
        <hr>
        <p class="text-sm w-full mb-1 mt-1 text-gray-400 tracking-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet imperdiet metus.</p>
        <hr class="mb-3">
         <p class="bg-black bg-opacity-40 hover:bg-opacity-70 duration-500 text-center text-white font-light py-2 rounded w-full tracking-wider">
  BUTTON TITLE
</p>
      </a>

      <a href="YOURLINKHERE" class="group pt-5" rel="nofollow">
        <div class="overflow-hidden xl:aspect-w-8 xl:aspect-h-8 aspect-w-1 aspect-h-1 w-full">
          <img src="https://images.unsplash.com/photo-1579009120139-f41119c5e2ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=475&q=80" class="rounded h-60 w-full object-center object-cover group-x transition duration-500 hover:opacity-50">
        </div>
      <p class="mt-1 text-xl text-white font-semibold">Lorem Ipsum - Title</p>
        <p class="mt-1 mb-1 text-m text-white font-light italic"> $500-$700</p>
        <hr>
        <p class="text-sm w-full mb-1 mt-1 text-gray-400 tracking-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet imperdiet metus.</p>
        <hr class="mb-3">
         <p class="bg-black bg-opacity-40 hover:bg-opacity-70 duration-500 text-center text-white font-light py-2 rounded w-full tracking-wider">
  BUTTON TITLE
</p>
      </a>



    </div>
  </div>
</div>
</div>

   <p class="ml-5 mb-5">
<a href="https://buzzly.art/~Voskhod" rel="nofollow"><i class="fas fa-code text-sm pt-5"></i></a>
    </p>