Why Us section with hover animation

Forked from @prashant/resonsive-card-grid-with-hover-animation

Why to choose us section, responsive and hove animation

This tailwind example is contributed by Amit Pachange, on 24-Apr-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us,Transitions,about me

Card Feature showcase Animation About us

Author Amit Pachange

Tailwind v3.4 5.8k 14

Fork Fullscreen

<section class="text-gray-700 body-font">
  <div class="flex justify-center mt-10 text-4xl font-regular">
    Why Us?
  </div>
  <div class="container px-5 py-12 mx-auto">
    <div class="flex flex-wrap text-center justify-center">
      <div class="p-4 md:w-1/4 sm:w-1/2">
        <div class="px-4 py-6 transform transition duration-500 hover:scale-110">
          <div class="flex justify-center">
            <img src="https://image3.jdomni.in/banner/13062021/58/97/7C/E53960D1295621EFCB5B13F335_1623567851299.png?output-format=webp" class="w-32 mb-3">
          </div>
          <h2 class="title-font font-regular text-2xl text-gray-900">Latest Milling Machinery</h2>
        </div>
      </div>

<div class="p-4 md:w-1/4 sm:w-1/2">
        <div class="px-4 py-6 transform transition duration-500 hover:scale-110">
          <div class="flex justify-center">
            <img src="https://image2.jdomni.in/banner/13062021/3E/57/E8/1D6E23DD7E12571705CAC761E7_1623567977295.png?output-format=webp" class="w-32 mb-3">
          </div>
          <h2 class="title-font font-regular text-2xl text-gray-900">Reasonable Rates</h2>
        </div>
      </div>

<div class="p-4 md:w-1/4 sm:w-1/2">
        <div class="px-4 py-6 transform transition duration-500 hover:scale-110">
          <div class="flex justify-center">
            <img src="https://image3.jdomni.in/banner/13062021/16/7E/7E/5A9920439E52EF309F27B43EEB_1623568010437.png?output-format=webp" class="w-32 mb-3">
          </div>
          <h2 class="title-font font-regular text-2xl text-gray-900">Time Efficiency</h2>
        </div>
      </div>

<div class="p-4 md:w-1/4 sm:w-1/2">
        <div class="px-4 py-6 transform transition duration-500 hover:scale-110">
          <div class="flex justify-center">
            <img src="https://image3.jdomni.in/banner/13062021/EB/99/EE/8B46027500E987A5142ECC1CE1_1623567959360.png?output-format=webp" class="w-32 mb-3">
          </div>
          <h2 class="title-font font-regular text-2xl text-gray-900">Expertise in Industry</h2>
        </div>
      </div>

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

Related Examples

Feature cards with icons on top

Manon Daniel

3 years ago

18.4k
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.9k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.2k
Features grid

Sophia Baker

3 years ago

10.9k
About us card

Sienna

3 years ago

12.3k
why choose us (features showcase) example

Erik Hyatt

3 years ago

17.9k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Ragnar lodbrok

2 years ago

6.1k
Feature Highlights cards

Carla Hoffman

2 years ago

3.1k
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

Amit Pachange

2 years ago

16.1k
Animated cards with Tailwind CSS

Michael Andreuzza

2 years ago

13k