Experiance & Explanation

Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

This tailwind example is contributed by Matti, on 16-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Matti

Tailwind v3.4 1.9k 4

Fork Fullscreen

<section class="relative z-10 dark:bg-gray-800">
  <div class="w-full overflow-hidden">
    <div class="relative z-20 flex flex-row w-full lg:w-11/12 mx-auto px-4 lg:!px-0">
      <div class="fw-full md:w-7/12 lg:w-8/12 py-6 md:py-12">
        <div class="flex flex-row">
          <div class="w-1/12 text-8xl md:text-9xl font-bold text-emerald-600" data-inviewport="fadeInSoft">
            19
          </div>
          <div class="w-11/12 flex flex-col ml-28 mt-3">
            <p class="font-light text-xl md:text-3xl dark:text-gray-200">years of</p>
            <h2 class="font-semibold text-3xl md:text-5xl lg:text-6xl dark:text-gray-200">Experiance</h2>
          </div>
        </div>
        <div class="pt-2 pb-4 md:pt-4 border-b border-gray-300 dark:border-gray-700">
          <p class="font-light dark:text-gray-200">
            You can copy and paste it or modify however you want. Feel free to name the author in a hidden remark or to set the components as favorite. Optional you can you can contact the author and say thanks by send a message.
          </p>
        </div>
        <div class="w-full mt-2 md:pt-4 flex flex-col lg:flex-row">
          <div class="w-full lg:w-1/3 flex flex-row mt-6 md:!mt-0 fadeInSoft" data-inviewport="fadeInSoft">
            <div class="relative w-3/12">
              <div class="absolute bottom-6 top-0 rounded-full w-12 h-12  bg-emerald-600 flex pl-3 items-center">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" class="text-[#fff] w-6 h-6"><defs><style>.cls-6374f8d9b67f094e4896c60e-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><circle class="cls-6374f8d9b67f094e4896c60e-1" cx="12" cy="13.91" r="8.59"></circle><path class="cls-6374f8d9b67f094e4896c60e-1" d="M2.07,8.18a11.54,11.54,0,0,1,3.6-3.82"></path><path class="cls-6374f8d9b67f094e4896c60e-1" d="M18.33,4.36a11.54,11.54,0,0,1,3.6,3.82"></path><line class="cls-6374f8d9b67f094e4896c60e-1" x1="12" y1="1.5" x2="12" y2="5.32"></line><line class="cls-6374f8d9b67f094e4896c60e-1" x1="10.09" y1="1.5" x2="13.91" y2="1.5"></line><line class="cls-6374f8d9b67f094e4896c60e-1" x1="5.93" y1="19.98" x2="3.41" y2="22.5"></line><line class="cls-6374f8d9b67f094e4896c60e-1" x1="20.59" y1="22.5" x2="18.07" y2="19.98"></line><line class="cls-6374f8d9b67f094e4896c60e-1" x1="12" y1="8.18" x2="12" y2="14.86"></line></svg>
              </div>
            </div>
            <div class="w-9/12 flex flex-col">
              <h1 class="font-semibold mb-1.5 md:mb-3 uppercase md:pl-4 dark:text-gray-200">24/7 Hotline</h1>
              <p class="mb-1 font-light pr-2 leading-relaxed line-clamp-3 md:pl-4 dark:text-gray-200">
                Take advantage of round-the-clock email. We answer as fast as possible.
              </p>
            </div>
          </div>
          <div class="w-full lg:w-1/3 flex flex-row mt-6 md:!mt-0 fadeInSoft" data-inviewport="fadeInSoft">
            <div class="relative w-3/12">
              <div class="absolute bottom-6 top-0 rounded-full w-12 h-12  bg-emerald-600 flex pl-3 items-center">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" class="text-[#fff] w-6 h-6"><defs><style>.cls-6375f1aeb67f094e4896c9ea-1,.cls-6375f1aeb67f094e4896c9ea-2{fill:none;stroke:currentColor;stroke-miterlimit:10;}.cls-6375f1aeb67f094e4896c9ea-1{stroke-linecap:square;}</style></defs><g id="calendar"><rect class="cls-6375f1aeb67f094e4896c9ea-1" x="1.5" y="2.43" width="21" height="4.77" transform="translate(24 9.64) rotate(180)"></rect><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="17.73" y1="0.52" x2="17.73" y2="4.34"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="6.27" y1="0.52" x2="6.27" y2="4.34"></line><polygon class="cls-6375f1aeb67f094e4896c9ea-1" points="22.5 11.98 22.5 7.21 1.5 7.21 1.5 22.48 22.5 22.48 22.5 15.79 22.5 11.98"></polygon><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="9.14" y1="11.02" x2="11.05" y2="11.02"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="12.95" y1="11.02" x2="14.86" y2="11.02"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="16.77" y1="11.02" x2="18.68" y2="11.02"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="9.14" y1="14.84" x2="11.05" y2="14.84"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="5.32" y1="14.84" x2="7.23" y2="14.84"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="12.95" y1="14.84" x2="14.86" y2="14.84"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="16.77" y1="14.84" x2="18.68" y2="14.84"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="9.14" y1="18.66" x2="11.05" y2="18.66"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="5.32" y1="18.66" x2="7.23" y2="18.66"></line><line class="cls-6375f1aeb67f094e4896c9ea-2" x1="12.95" y1="18.66" x2="14.86" y2="18.66"></line></g></svg>
              </div>
            </div>
            <div class="w-9/12 flex flex-col">
              <h1 class="font-semibold mb-1.5 md:mb-3 uppercase md:pl-4 dark:text-gray-200">Good planing</h1>
              <p class="mb-1 font-light pr-2 leading-relaxed line-clamp-3 md:pl-4 dark:text-gray-200">
                We plan the entire project process with you and keep you up to date.
              </p>
            </div>
          </div>
          <div class="w-full lg:w-1/3 flex flex-row mt-6 md:!mt-0 fadeInSoft" data-inviewport="fadeInSoft">
            <div class="relative w-3/12">
              <div class="absolute bottom-6 top-0 rounded-full w-12 h-12  bg-emerald-600 flex pl-3 items-center">
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" class="text-[#fff] w-6 h-6"><defs><style>.cls-63ce7444ea57ea6c838005ed-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><path class="cls-63ce7444ea57ea6c838005ed-1" d="M6.27,21.55H8.5l2.33.95h7.92a2.86,2.86,0,0,0,2.85-2.59l.88-9.13c0-.14,0-.28,0-.42h0a2.18,2.18,0,0,0-2.18-2.18H15.63l.52-1.09a6.27,6.27,0,0,0,.62-2.73h0A2.86,2.86,0,0,0,13.91,1.5h0A1.9,1.9,0,0,0,12,3.41h0a6,6,0,0,1-1.25,3.66l-2.33,3H6.27"></path><rect class="cls-63ce7444ea57ea6c838005ed-1" x="1.5" y="9.14" width="4.77" height="13.36"></rect></svg>
              </div>
            </div>
            <div class="w-9/12 flex flex-col">
              <h1 class="font-semibold mb-1.5 md:mb-3 uppercase md:pl-4 dark:text-gray-200">Fair prices</h1>
              <p class="mb-1 font-light pr-2 leading-relaxed line-clamp-3 md:pl-4 dark:text-gray-200">
                Value for money! One-time cost for a perfect online presentation for years.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="relative hidden md:inline md:w-5/12 lg:w-4/12 mt-12 justify-items-center bottom-0" data-inviewport="fadeIn-normal">
        <img class="object-cover w-auto h-[385px] absolute left-[20%] button-0" src="https://i.ibb.co/Q9Gfz7w/portrait-person-working-construction-field-freepic-AI-Gen.png" title="Construction Worker" alt="{constr.worker}" />
      </div>
    </div>
  </div>
  
</section>

Related Examples

Responsive cards with hover

Robert Chunga

2 years ago

3.5k
Showcase
A version of an showcase.

Matti

1 year ago

1.9k
Responsive Features Cards Section
A modern and fully responsive services section featuring premium glassmorphism cards, interactive hover effects, smooth animations, and a clean multi-column grid layout. Perfect for SaaS, startups, agencies, portfolios, business websites, and landing pages. Built with semantic HTML and easy-to-customize CSS for seamless integration into any modern web project.

JUGENDRA GANGWAR

3 months ago

150
Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k
interactive testimonial with Tailwind CSS and Alpine.js

Michael Andreuzza

2 years ago

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

Amit Pachange

2 years ago

5.7k
Product feature section
Showcase product features with an image

Anonymous

3 years ago

14.7k
Product features list with inner border

Lîmåã M

3 years ago

15.1k
Features list with icons

L.J. Weber

3 years ago

15.2k
Feature cards with icons on top

Manon Daniel

3 years ago

18.3k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Akram Khan

2 years ago

3.2k
Feature showcase cards

Lukas Müller

3 years ago

14.8k