Feature section - Htmlwind

Three columns with icons

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Htmlwind

Tailwind v3.4 1.2k 4

Fork Fullscreen

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
      <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover the core features</p>
    </div>
    <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
      <dl class="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
        <div class="flex flex-col">
          <dt class="text-xl font-medium text-gray-900">
            <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
              <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor" />
                <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor" />
              </svg>
            </div>
            Effortless Integration
          </dt>
          <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
            <p class="flex-auto">Easily connect with the tools you already use and love. Our platform is designed for seamless integration with a variety of third-party applications.</p>
            <p class="mt-10">
              <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                Learn more
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </a>
            </p>
          </dd>
        </div>
        <div class="flex flex-col">
          <dt class="text-xl font-medium text-gray-900">
            <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
              <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            Advanced Customization
          </dt>
          <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
            <p class="flex-auto">Adapt the platform to suit your specific business needs. With our extensive customization options, you can modify features, adjust settings, and personalize your experience.</p>
            <p class="mt-10">
              <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                Learn more
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </a>
            </p>
          </dd>
        </div>
        <div class="flex flex-col">
          <dt class="text-xl font-medium text-gray-900">
            <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
              <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M20.91 11.12C20.91 16.01 17.36 20.59 12.51 21.93C12.18 22.02 11.82 22.02 11.49 21.93C6.63996 20.59 3.08997 16.01 3.08997 11.12V6.72997C3.08997 5.90997 3.70998 4.97998 4.47998 4.66998L10.05 2.39001C11.3 1.88001 12.71 1.88001 13.96 2.39001L19.53 4.66998C20.29 4.97998 20.92 5.90997 20.92 6.72997L20.91 11.12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            Enhanced Security
          </dt>
          <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
            <p class="flex-auto">Protect your data with our state-of-the-art security features. Our SaaS platform is built with advanced encryption and compliance tools to safeguard your information.</p>
            <p class="mt-10">
              <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                Learn more
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </a>
            </p>
          </dd>
        </div>
      </dl>
    </div>
  </div>
</div>

Related Examples

Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Siva Naga Malleswararao Kurakula

1 year ago

2.2k
Our services component

Anonymous

2 years ago

2.6k
Features grid

Sophia Baker

3 years ago

10.8k
Feature showcase with images

Amit Pachange

3 years ago

14.6k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k
Features grid example
Tailwind clean and responsive features section with the heading

Alok

3 years ago

14.6k
Layout switcher with tailwindcss and alpinejs

Michael Andreuzza

2 years ago

1.5k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

931
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Matti

1 year ago

2.2k
Features list with images and description

Noah Schmidt

3 years ago

15.1k
Features showcase section
showcase key features and benefits

Mereani Waqa

2 years ago

7.6k
Dark mode with Tailwind CSS and alpinjs

Michael Andreuzza

2 years ago

4k