Vibedex.io
Back to gallery
featuresBeginner

Feature Grid

A 3-up feature grid with icons, headings, and supporting copy.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a feature grid with Tailwind: section heading + intro at the top, then a 3-column grid (1 on mobile, 2 on sm, 3 on lg) of feature blocks. Each block has an icon in a colored tint square, a heading, and a 2-line description. Equal heights via items-stretch.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/feature-grids/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-marketing-features
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-lg text-center">
        <h2 class="text-3xl/tight font-bold text-gray-900 sm:text-4xl">Features for growth</h2>

        <p class="mt-4 text-lg text-pretty text-gray-700">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam
          voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.
        </p>
      </div>

      <div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-3">
        <div class="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>

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

          <p class="mt-2 text-pretty text-gray-700">
            Lightning-quick load times optimized for every device
          </p>
        </div>

        <div class="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>

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

          <p class="mt-2 text-pretty text-gray-700">
            Enterprise-grade security built into every layer
          </p>
        </div>

        <div class="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>

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

          <p class="mt-2 text-pretty text-gray-700">
            Adapt every aspect to match your brand and needs
          </p>
        </div>
      </div>
    </div>
  </div>
</div>