<section class="body-font text-gray-600">
  <div
    class="container pl-5 pr-5 px-5 pt-24 pb-24 py-24 ml-auto mr-auto mx-auto max-w-screen-2xl"
  >
    <div class="text-center mb-20">
      <h1
        class="title-font text-2xl font-medium text-gray-900 mb-4 sm:text-3xl"
      >
        Artisanal Denim Crafted to Last
      </h1>
      <p
        class="text-gray-500s text-base leading-relaxed ml-auto mr-auto mx-auto lg:w-3/4 xl:w-2/4"
      >
        Discover timeless craftsmanship with our signature line of handwoven
        denim. Designed for durability and comfort with a focus on sustainable
        production methods.
      </p>
      <div class="flex mt-6 justify-center">
        <div class="inline-flex w-16 h-1 rounded-full bg-indigo-500"></div>
      </div>
    </div>
    <div
      class="sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6 flex flex-wrap"
    >
      <div
        class="pt-4 pr-4 pb-4 pl-4 flex flex-col text-center items-center md:w-1/3"
      >
        <div
          class="inline-flex flex-shrink-0 w-20 h-20 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"
        >
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-10 h-10"
            viewBox="0 0 24 24"
          >
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <h2 class="title-font text-gray-900 text-lg font-medium mb-3">
            Heritage Stitching
          </h2>
          <p class="leading-relaxed text-base">
            Every pair is finished with precision lockstitching, inspired by
            classic tailoring traditions and made to hold through years of wear.
          </p>
          <a class="inline-flex mt-3 text-indigo-500 items-center">
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Learn More
            </span>
            <svg
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              class="w-4 h-4 ml-2"
              viewBox="0 0 24 24"
            >
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>
      <div
        class="pt-4 pr-4 pb-4 pl-4 flex flex-col text-center items-center md:w-1/3"
      >
        <div
          class="inline-flex flex-shrink-0 w-20 h-20 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"
        >
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-10 h-10"
            viewBox="0 0 24 24"
          >
            <circle cx="6" cy="6" r="3"></circle>
            <circle cx="6" cy="18" r="3"></circle>
            <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <h2 class="title-font text-gray-900 text-lg font-medium mb-3">
            Eco-Dye Technology
          </h2>
          <p class="leading-relaxed text-base">
            We use a water-efficient dyeing process that reduces waste and
            minimizes environmental impact, without compromising rich color
            depth.
          </p>
          <a class="inline-flex mt-3 text-indigo-500 items-center">
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Learn More
            </span>
            <svg
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              class="w-4 h-4 ml-2"
              viewBox="0 0 24 24"
            >
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>
      <div
        class="pt-4 pr-4 pb-4 pl-4 flex flex-col text-center items-center md:w-1/3"
      >
        <div
          class="inline-flex flex-shrink-0 w-20 h-20 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"
        >
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-10 h-10"
            viewBox="0 0 24 24"
          >
            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </div>
        <div class="flex-grow">
          <h2 class="title-font text-gray-900 text-lg font-medium mb-3">
            Perfect Fit Guarantee
          </h2>
          <p class="leading-relaxed text-base">
            Designed with feedback from real customers, our adaptive sizing
            ensures a tailored feel for every body shape, backed by our fit
            assurance policy.
          </p>
          <a class="inline-flex mt-3 text-indigo-500 items-center">
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              Learn More
            </span>
            <svg
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              class="w-4 h-4 ml-2"
              viewBox="0 0 24 24"
            >
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <button
      class="flex ml-auto mr-auto mx-auto mt-16 text-white bg-indigo-500 border-0 pt-2 pb-2 py-2 pl-8 pr-8 px-8 focus:outline-none rounded text-lg hover:bg-indigo-600"
    >
      Button
    </button>
  </div>
</section>