Home
Dipti narayan
Basic features section

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 CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Dipti narayan

6.7k

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 Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

2 years ago

23.7k
Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

11 months ago

2.2k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

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

Author:
makecomponents

11 months ago

1.7k
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.3k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

12.6k
Feature display cards (grid layout)

Author:
Ronald Otieno

1 year ago

2.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

3.8k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

1 month ago

476
Services showcase Section
With hover effect on cards

Author:
Anonymous

1 year ago

2.2k
accordion with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.8k
Feature, Showcase

Author:
Matti

7 months ago

941

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components