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

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
Services showcase Section
With hover effect on cards

Anonymous

2 years ago

3.2k
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

KULDEEP

1 year ago

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

Alok

3 years ago

14.6k
Our services component

Anonymous

2 years ago

2.6k
Feature section - Htmlwind
Three columns with icons

Htmlwind

1 year ago

1.2k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

4 years ago

26.7k
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Elsabe Fourie

2 years ago

10k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

282
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
Video Player
Youtube Video Player

KULDEEP

1 year ago

1.2k
Responsive Features section

Piet Vriend

4 years ago

11.7k