Marketing Feature Grids Grid with list items

Live Preview
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
        <div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
          <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
              />
            </svg>
          </div>

          <div>
            <h3 class="text-lg font-semibold text-gray-900">High performance</h3>

            <p class="mt-2 text-pretty text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut accusamus consectetur
              eius quo ea ipsa illum eos amet velit assumenda.
            </p>
          </div>
        </div>

        <div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
          <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
              />
            </svg>
          </div>

          <div>
            <h3 class="text-lg font-semibold text-gray-900">Enterprise security</h3>

            <p class="mt-2 text-pretty text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Est optio fugit eos quia
              ipsam ullam pariatur iusto accusantium possimus distinctio?
            </p>
          </div>
        </div>

        <div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
          <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
              />
            </svg>
          </div>

          <div>
            <h3 class="text-lg font-semibold text-gray-900">Highly configurable</h3>

            <p class="mt-2 text-pretty text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis
              debitis. Nobis officia dignissimos aliquam praesentium quod?
            </p>
          </div>
        </div>

        <div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
          <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
              />
            </svg>
          </div>

          <div>
            <h3 class="text-lg font-semibold text-gray-900">Advanced reporting</h3>

            <p class="mt-2 text-pretty text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis
              debitis. Nobis officia dignissimos aliquam praesentium quod?
            </p>
          </div>
        </div>
      </div>
    </div>

Related components

More items from the merged UI library.

View all