Home
Htmlwind
Feature section - Htmlwind

Feature section - Htmlwind

Three columns with icons

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

Feature showcase

Author Htmlwind

354

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

Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

15.2k
Features showcase section
showcase key features and benefits

Author:
Mereani Waqa

2 years ago

7.3k
Hotel rooms
A simple room overview

Author:
Matti

10 months ago

1.4k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

10.2k
Our services component

Author:
Kris Showen

2 years ago

9.9k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Author:
Kavita Joshi

1 year ago

6.9k
Video Player
Youtube Video Player

Author:
KULDEEP

4 months ago

426
Facts
A simple facts overview

Author:
Matti

11 months ago

1.4k
Responsive Features Section

Author:
Abdul Baset Bappy

5 months ago

812
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

4 months ago

280
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

1 year ago

1.9k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components