Home
ariaw
Features section

Features section

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

Feature showcase

Author ariaw

115

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

Showcase
A version of an showcase.

Author:
Matti

1 year ago

1.3k
Feature tiles

Author:
Nishant Trivedi

2 years ago

14.3k
Simple Features section

Author:
Odessa Young

2 years ago

16.9k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 year ago

2.6k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

5 months ago

402
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
Features

Author:
Matti

1 year ago

1.1k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

16.9k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

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

Author:
Alok

3 years ago

25.4k
Products Layout
An ecommerce store front product list layout

Author:
Developer Kwame

3 months ago

502
Features Component

Author:
KULDEEP

5 months ago

946

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components