How it works UI Components – Nigodo Library

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-indigo-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-16">Gain more insight into how people use your</h1>
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">1</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Custom analytics</h3>
              <p class="font-bold">Get a complete sales dashboard in the cloud.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">2</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Team Management</h3>
              <p class="font-bold">Our calendar lets you know what is happening with customer</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">3</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Easy setup</h3>
              <p class="font-bold">End to End Business Platform, Sales Management, Marketing</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">4</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Build your website</h3>
              <p class="font-bold">A tool that lets you build a dream website even if you know nothing</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block w-full h-128 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
      </div>
    </div>
  </div>
</section>