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

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