Home
$@(\/)(\/)Y
House Cleaning Website Services Section

House Cleaning Website Services Section

House Cleaning Website Services Section
Photo by @candjstudios & @framesforyourheart on Unsplash

This tailwind example is contributed by $@(\/)(\/)Y, on 15-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

6.8k

Fork Fullscreen

<section class="w-full mx-auto py-10 bg-gray-50 dark:bg-gray-900 dark:text-white">
  
  <div
    class="w-fit pb-1 px-2 mx-4 rounded-md text-2xl font-semibold border-b-2 border-blue-600 dark:border-b-2 dark:border-yellow-600">
    Services</div>

<div class="md:w-[50%] w-full bg-gray-100 dark:bg-gray-900 dark:text-gray-400 md:p-4 p-0 rounded-md">
        <h2 class="text-3xl font-semibold text-gray-900 dark:text-white">Lorem ipsum dolor sit amet consectetur</h2>
        <p class="text-md mt-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore placeat assumenda nam
          veritatis, magni doloremque pariatur quos fugit ipsa id voluptatibus deleniti officiis cum ratione eligendi
          sed necessitatibus aliquam error laborum delectus quaerat. Delectus hic error eligendi sed repellat natus fuga
          nobis tempora possimus ullam!</p>
      </div>

</div>
    
    <div
      class="xl:w-[80%] sm:w-[85%] w-[90%] mx-auto flex md:flex-row flex-col flex-col-reverse lg:gap-4 gap-2 justify-center lg:items-stretch md:items-center mt-6">
      
      <div class="md:w-[50%] w-full bg-gray-100 dark:bg-gray-900 dark:text-gray-400 md:p-4 p-0 rounded-md">
        <h2 class="text-3xl font-semibold text-gray-900 dark:text-white">Lorem ipsum dolor sit amet consectetur</h2>

<p class="text-md mt-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore placeat assumenda nam
          veritatis, magni doloremque pariatur quos fugit ipsa id voluptatibus deleniti officiis cum ratione eligendi
          sed necessitatibus aliquam error laborum delectus quaerat. Delectus hic error eligendi sed repellat natus fuga
          nobis tempora possimus ullam!</p>
      </div>
      
      <img class="md:w-[50%] w-full md:rounded-t-lg rounded-sm" src="https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8aG9tZXxlbnwwfDB8fHwxNzEwNDkwMDcwfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="billboard image" />

</div>
  </div>
</section>

Related Examples

Product page
Product Information Card component that provides comprehensive details about a product, including an image, name, description, price, availability, color and size options, and a product description.

Author:
JaxStone

2 years ago

47.7k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.1k
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Author:
Elsabe Fourie

1 year ago

9.1k
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

16k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.2k
Feature showcase with images

Author:
Amit Pachange

2 years ago

13.5k
Onboarding steps section

Author:
Prashant

1 year ago

5.8k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

27.7k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

43.3k
Services

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.7k
Service section

Author:
inbarajan P

1 year ago

1.6k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components