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

756

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

Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

1 year ago

8.9k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

1 week ago

52
Services showcase Section
With hover effect on cards

Author:
Anonymous

1 year ago

2.2k
accordion with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.8k
Feature Cards
w/ large icons

Author:
Mr Robot

3 years ago

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

Author:
Ragnar lodbrok

1 year ago

4.7k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

2 weeks ago

230
interactive testimonial with Tailwind CSS and Alpine.js

Author:
Michael Andreuzza

1 year ago

2.2k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

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

Author:
Amit Pachange

1 year ago

4.3k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

3 months ago

236
Features grid

Author:
Sophia Baker

2 years ago

9.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components