Basic features section

Display your most important features

This tailwind example is contributed by Dipti narayan, on 06-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Dipti narayan

Tailwind v3.4 7.9k 8

Fork Fullscreen

<div class="py-12 bg-gray-50">
  <div class="max-w-xl px-4 mx-auto sm:px-6 lg:max-w-screen-xl lg:px-8">
    <div>
      <h3 class="text-3xl font-extrabold leading-8 tracking-tight text-center text-gray-900 sm:text-4xl sm:leading-10">
        Packed with features
      </h3>
      <p class="max-w-3xl mx-auto mt-4 text-xl leading-7 text-center text-gray-500">
        This product has the most features that you will need out of all box.
      </p>
    </div>

<div class="mt-12 lg:grid lg:grid-cols-3 lg:gap-8">
      <div>
        <div class="flex items-center justify-center w-12 h-12 text-white bg-indigo-500 rounded-md">
          <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            viewBox="0 0 24 24" stroke="currentColor">
            <path
              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
            </path>
          </svg>
        </div>
        <div class="mt-5">
          <h5 class="text-lg font-medium leading-6 text-gray-900">Advanced Encryption</h5>
          <p class="mt-2 text-base leading-6 text-gray-600">
            Encrypt your files and folders with military-grade encryption algorithms, ensuring that only authorized
            users can access your data.
          </p>
        </div>
      </div>
      <div class="mt-10 lg:mt-0">
        <div class="flex items-center justify-center w-12 h-12 text-white bg-indigo-500 rounded-md">
          <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            viewBox="0 0 24 24" stroke="currentColor">
            <path
              d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
          </svg>
        </div>
        <div class="mt-5">
          <h5 class="text-lg font-medium leading-6 text-gray-900">Access Control</h5>
          <p class="mt-2 text-base leading-6 text-gray-600">
            Set up granular access controls and permissions to determine who can view, edit, or share your data, giving
            you full control over who has access to your information.
          </p>
        </div>
      </div>
      <div class="mt-10 lg:mt-0">
        <div class="flex items-center justify-center w-12 h-12 text-white bg-indigo-500 rounded-md">
          <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            viewBox="0 0 24 24" stroke="currentColor">
            <path d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
          </svg>
        </div>
        <div class="mt-5">
          <h5 class="text-lg font-medium leading-6 text-gray-900">Real-time Monitoring</h5>
          <p class="mt-2 text-base leading-6 text-gray-600">
            Stay informed about the security of your data with real-time monitoring and alerts, so you can respond
            quickly to any suspicious activity.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Features section
Showcase your key features

Manon Daniel

3 years ago

17.5k
Feature cards

Fagundo67

3 years ago

11.5k
Feature showcase with images

Amit Pachange

3 years ago

14.6k
Animated Feature Grid Component with Tailwind CSS
Animated feature grid component built with Tailwind CSS. Features smooth hover animations, gradient cards, dark mode support, and responsive design. Perfect for showcasing product features.

Homayoun

9 months ago

1.2k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Ragnar lodbrok

2 years ago

5.9k
Our Vision block

L.J. Weber

3 years ago

12.7k
Services
Card Services Section. find it makecomponents.com

makecomponents

2 years ago

2.7k
tailwind contact form
tailwind contact form

Geoffrey Callaghan

2 years ago

4k
accordion with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.9k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Matti

1 year ago

3k
Hotel rooms
A simple room overview

Matti

1 year ago

2.1k
Features list with images and description

Noah Schmidt

3 years ago

15.1k