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

Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

789
Showcase
A version of an showcase.

Matti

1 year ago

1.9k
Features grid

Sophia Baker

3 years ago

10.8k
Product features list with inner border

Lîmåã M

3 years ago

15.1k
Our services component

Anonymous

2 years ago

2.6k
Features grid with icon

Freja Jensen

3 years ago

11.7k
Animated cards

Michael Andreuzza

2 years ago

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

SAURAV SINGH

1 year ago

1.1k
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
Services
Card Services Section. find it makecomponents.com

makecomponents

2 years ago

2.7k
Feature card

Matti

1 year ago

2k