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

Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Kavita Joshi

2 years ago

7.4k
Palette2

Lasse Strand Ringvold

8 months ago

776
Animated cards

Michael Andreuzza

2 years ago

7.4k
Feature Showcase
Showcase Features of your product

Prashant

4 years ago

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

Elsabe Fourie

2 years ago

10k
Dark mode with Tailwind CSS and alpinjs

Michael Andreuzza

2 years ago

4k
Our services component

Kris Showen

3 years ago

10.6k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k
CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

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

251
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Matti

1 year ago

2.2k