Service section

This tailwind example is contributed by inbarajan P, on 05-Sep-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase Grid

Author inbarajan P

Tailwind v3.4 2.4k 8

Fork Fullscreen

<section class="bg-[#d9d9d9] relative isolate overflow-hidden px-2 py-2 sm:px-5 sm:py-5">
	  <div class="mx-auto max-w-md lg:max-w-7xl">
	    <div class="px-4 py-4 lg:px-5 lg:py-3">
	      <div class="font-Poppins text-center text-2xl font-bold leading-5 tracking-widest lg:text-3xl">Our <span class="from-30% from-[#FF8E26] to-55% to-[#0163E0] inline-block bg-gradient-to-r bg-clip-text text-transparent"> Service </span></div>
	    </div>
	  </div>
	  <div class="mx-auto max-w-full px-4 py-4 md:max-w-screen-lg">
	    <div class="grid grid-cols-1 items-stretch justify-center gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-7">
	      <div class="shadow-custom-white shadow-gray-500 rounded-lg bg-white">
	        <div class="px-4 py-4">
	          <div class="flex items-center justify-start">
	            <div class="flex h-8 w-8 items-center justify-center rounded-full bg-black">
	              <p class="text-white">I</p>
	            </div>
	            <div class="px-3 py-3">
	              <p class="font-Poppins text-sm font-semibold tracking-tight text-black md:font-bold md:tracking-wider">Title</p>
	            </div>
	          </div>
	          <div class="mt-4 max-w-full md:max-w-md">
	            <p class="text-[9px] font-Poppins font-medium leading-4 tracking-wider text-black">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis dignissimos ratione vel minus ullam dolore debitis iure, perspiciatis magnam consequatur illum. Maiores quis dolorem beatae ut odit, ab magnam alias.</p>
	          </div>
	        </div>
	      </div>
	      <div class="shadow-custom-white shadow-gray-500 rounded-lg bg-white">
	        <div class="px-4 py-4">
	          <div class="flex items-center justify-start">
	            <div class="flex h-8 w-8 items-center justify-center rounded-full bg-black">
	              <p class="text-white">I</p>
	            </div>
	            <div class="px-3 py-3">
	              <p class="font-Poppins text-sm font-semibold tracking-tight text-black md:font-bold md:tracking-wider">Title</p>
	            </div>
	          </div>
	          <div class="mt-4 max-w-full md:max-w-md">
	            <p class="text-[9px] font-Poppins font-medium leading-4 tracking-wider text-black">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis dignissimos ratione vel minus ullam dolore debitis iure, perspiciatis magnam consequatur illum. Maiores quis dolorem beatae ut odit, ab magnam alias.</p>
	          </div>
	        </div>
	      </div>
	      <div class="shadow-custom-white shadow-gray-500 rounded-lg bg-white">
	        <div class="px-4 py-4">
	          <div class="flex items-center justify-start">
	            <div class="flex h-8 w-8 items-center justify-center rounded-full bg-black">
	              <p class="text-white">I</p>
	            </div>
	            <div class="px-3 py-3">
	              <p class="font-Poppins text-sm font-semibold tracking-tight text-black md:font-bold md:tracking-wider">Title</p>
	            </div>
	          </div>
	          <div class="mt-4 max-w-full md:max-w-md">
	            <p class="text-[9px] font-Poppins font-medium leading-4 tracking-wider text-black">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis dignissimos ratione vel minus ullam dolore debitis iure, perspiciatis magnam consequatur illum. Maiores quis dolorem beatae ut odit, ab magnam alias.</p>
	          </div>
	        </div>
	      </div>
	    </div>
	  </div>
	</section>

Related Examples

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.

Amit Pachange

4 years ago

53.6k
Responsive Feature Card

Gopi Yadav

4 years ago

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

Alok

3 years ago

26.7k
Features grid

Sophia Baker

3 years ago

10.7k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k
Feature showcase cards

Lukas Müller

3 years ago

14.8k
Feature cards

Fagundo67

3 years ago

11.5k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.5k
Feature tiles

Nishant Trivedi

3 years ago

15.2k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Computer guy

3 years ago

13.3k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Nikita

2 years ago

5.8k
Feature display cards (grid layout)

Ronald Otieno

2 years ago

3.6k