Home
inbarajan P
Service section

Service section

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

Feature showcase Grid

Author inbarajan P

212

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

Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

1 year ago

6.5k
Post Responsive Grid
Laravel News post grid

Author:
Mr Robot

2 years ago

10k
News website like card grid
fancy card grid

Author:
Mr Robot

1 year ago

11.3k
Animated cards

Author:
Michael Andreuzza

5 months ago

2.5k
accordion with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

5 months ago

810
Feature Showcase
Showcase Features of your product

Author:
Prashant

2 years ago

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

Author:
Computer guy

1 year ago

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

Author:
Alok

1 year ago

10.2k
Key Features
Showcase Key Features of your app

Author:
Anonymous

3 months ago

198
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

8.1k
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

5 months ago

1.3k
Simple Features section

Author:
Odessa Young

1 year ago

14.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent