Log In
BASIC-LIBRARY / SECTION / FEATURE

Feature One

Preview Code
Quick edit
<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"
  >
    <h1
      class="title-font text-2xl font-medium text-center text-gray-900 mb-20 sm:text-3xl"
    >
      <span data-node-handle="base-text" class="inline-block h-auto w-auto">
        Premium Outdoor Gear Collection
      </span>
      <br class="hidden sm:block" />
      <span data-node-handle="base-text" class="inline-block h-auto w-auto">
        Built for Adventure Seekers
      </span>
    </h1>
    <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 md:w-1/3">
        <div
          class="inline-flex flex-shrink-0 w-12 h-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"
        >
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-6 h-6"
            viewBox="0 0 24 24"
          >
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
          </svg>
        </div>
        <div class="flex-grow pl-6">
          <h2 class="title-font text-gray-900 text-lg font-medium mb-2">
            Ultralight Trekking Poles
          </h2>
          <p class="leading-relaxed text-base">
            Designed for durability and ease of use, our trekking poles feature
            carbon fiber shafts and ergonomic grips for all-day comfort on the
            trail.
          </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 md:w-1/3">
        <div
          class="inline-flex flex-shrink-0 w-12 h-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"
        >
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-6 h-6"
            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 pl-6">
          <h2 class="title-font text-gray-900 text-lg font-medium mb-2">
            Modular Utility Backpack
          </h2>
          <p class="leading-relaxed text-base">
            Engineered with weather-resistant materials, this backpack adapts to
            your needs with detachable compartments and easy-access pockets.
          </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 md:w-1/3">
        <div
          class="inline-flex flex-shrink-0 w-12 h-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"
        >
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="w-6 h-6"
            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 pl-6">
          <h2 class="title-font text-gray-900 text-lg font-medium mb-2">
            EcoTech Performance Jacket
          </h2>
          <p class="leading-relaxed text-base">
            Stay warm and dry with our breathable, recycled-fabric jacket that
            offers unmatched insulation and freedom of movement in all
            conditions.
          </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>
  </div>
</section>
© 2025 tailsections.com. All rights reserved

Don’t Lose Your Edits!

Your changes are saved locally, but they may expire or be lost if you don’t create an account.

Create Account