Tailwind How It Works Components in Zanrly library

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-800 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <h2 class="font-heading max-w-xl mb-20 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">We make things easy for your business</h2>
        <div class="flex flex-wrap -m-3">
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-gray-100 font-black bg-gray-700 rounded-full">1</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Connect</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-white font-black bg-blue-500 rounded-full">2</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Store</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-gray-100 font-black bg-gray-700 rounded-full">3</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Ship</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-gray-100 font-black bg-gray-700 rounded-full">4</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Deliver</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>