Home
Matti
Experiance & Explanation

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Matti

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 Features Section

Author:
ariaw

7 months ago

787
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.

Author:
Matti

11 months ago

1.6k
Responsive Features section

Author:
Piet Vriend

3 years ago

10.8k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.6k
Showcase
A version of an showcase.

Author:
Matti

11 months ago

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

Author:
Amit Pachange

1 year ago

4.8k
Our services component

Author:
Kris Showen

2 years ago

9.9k
Features showcase section
showcase key features and benefits

Author:
Mereani Waqa

2 years ago

7.3k
Feature showcase with images

Author:
Amit Pachange

2 years ago

13.7k
Feature cards

Author:
Fagundo67

2 years ago

10.9k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

6k
Services

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

10 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components