Features section

This tailwind example is contributed by ariaw, on 28-Oct-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author ariaw

Tailwind v3.4 905 2

Fork Fullscreen

<section class="bg-white px-4 py-16">
  <div class="mx-auto max-w-6xl">
    
    <div class="mb-16 text-center">
      <h2 class="mb-4 text-4xl font-bold text-black md:text-5xl">Features</h2>
      <p class="mx-auto max-w-2xl text-lg text-gray-600">Experience our platform's advanced capabilities designed for modern users</p>
    </div>

<div class="flex flex-col items-stretch gap-8 lg:flex-row">
      
      <div class="flex w-full lg:w-2/5">
        <img class="w-full border border-gray-300 object-cover" src="https://placehold.co/600x700/e5e7eb/000000" alt="Modern Platform Interface" />
      </div>

<div class="w-full lg:w-3/5">
        <div class="grid h-full grid-cols-1 gap-6 md:grid-cols-2">
          
          <div class="group border border-gray-300 bg-white p-6 transition-all duration-300 hover:border-black">
            <div class="mb-4 flex items-center">
              <div class="mr-4 flex flex-shrink-0 items-center justify-center bg-black p-3">
                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                  <circle cx="12" cy="7" r="4" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-black">Personalization</h3>
            </div>
            <p class="text-gray-600">Our platform leverages user data and behavior to provide a highly personalized experience with real-time content and product recommendations.</p>
          </div>

<div class="group border border-gray-300 bg-white p-6 transition-all duration-300 hover:border-black">
            <div class="mb-4 flex items-center">
              <div class="mr-4 flex flex-shrink-0 items-center justify-center bg-black p-3">
                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
                  <path d="M12 18h.01" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-black">Mobile</h3>
            </div>
            <p class="text-gray-600">Our mobile-first design offers a seamless browsing experience across all devices, including smartphones and tablets.</p>
          </div>

<div class="group border border-gray-300 bg-white p-6 transition-all duration-300 hover:border-black">
            <div class="mb-4 flex items-center">
              <div class="mr-4 flex flex-shrink-0 items-center justify-center bg-black p-3">
                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-black">Support</h3>
            </div>
            <p class="text-gray-600">Our support team is available around the clock to answer questions and resolve issues through email, phone, or live chat.</p>
          </div>

<div class="group border border-gray-300 bg-white p-6 transition-all duration-300 hover:border-black">
            <div class="mb-4 flex items-center">
              <div class="mr-4 flex flex-shrink-0 items-center justify-center bg-black p-3">
                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-black">Security</h3>
            </div>
            <p class="text-gray-600">We use cutting-edge security measures to protect customer information and ensure the safety of all transactions.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Feature Section Cards

Akram Khan

2 years ago

2.7k
Features

Matti

1 year ago

1.7k
Feature Highlights cards

Carla Hoffman

2 years ago

3.1k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Responsive Features Cards Section
A modern and fully responsive services section featuring premium glassmorphism cards, interactive hover effects, smooth animations, and a clean multi-column grid layout. Perfect for SaaS, startups, agencies, portfolios, business websites, and landing pages. Built with semantic HTML and easy-to-customize CSS for seamless integration into any modern web project.

JUGENDRA GANGWAR

3 months ago

149
Video Player
Youtube Video Player

KULDEEP

1 year ago

1.2k
Our services component

Anonymous

2 years ago

2.6k
Feature showcase with images

Amit Pachange

3 years ago

14.7k
Features list template

Lukas Müller

3 years ago

11.5k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Akram Khan

2 years ago

3.2k
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
Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Matti

1 year ago

2.2k