Abous Us

About us section with statastics and CTA buttons

This tailwind example is contributed by Rajesh Maheshwari, on 27-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is about me

About us

Author Rajesh Maheshwari

622

Fork Fullscreen

<section id="about" class="py-20 md:px-20 lg:px-20 bg-[#121212]">
  <div class="container mx-auto px-4">
    <div class="mb-12">
      
      <h2 class="text-purple-400 text-lg mb-2" data-aos="fade-down">
        About Us
      </h2>
      <h3 class="mb-4 text-3xl font-bold text-white section-title" data-aos="fade-down">
        Capturing Moments That Last Forever
      </h3>
      <p class="mb-8 max-w-3xl text-gray-400" data-aos="fade-down">
        With over a decade of experience in professional photography,
        we've mastered the art of storytelling through our lens. Our passion lies in capturing authentic moments and turning them into timeless memories.
      </p>

<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
        
        <div class="rounded-lg border border-gray-800 bg-[#1A1A1A] p-6 text-center">
          <h4 class="mb-2 text-3xl font-bold text-purple-400">10+</h4>
          <p class="text-gray-400">Years Experience</p>
        </div>
        <div class="rounded-lg border border-gray-800 bg-[#1A1A1A] p-6 text-center">
          <h4 class="mb-2 text-3xl font-bold text-purple-400">10+</h4>
          <p class="text-gray-400">Years Experience</p>
        </div>
         <div class="rounded-lg border border-gray-800 bg-[#1A1A1A] p-6 text-center">
          <h4 class="mb-2 text-3xl font-bold text-purple-400">10+</h4>
          <p class="text-gray-400">Years Experience</p>
        </div>
         <div class="rounded-lg border border-gray-800 bg-[#1A1A1A] p-6 text-center">
          <h4 class="mb-2 text-3xl font-bold text-purple-400">10+</h4>
          <p class="text-gray-400">Years Experience</p>
        </div>
       
      </div>
    </div>

<div class="flex flex-col sm:flex-row items-center gap-4 mt-8" data-aos="fade-up">
      <a href="#team" class="cursor-pointer rounded-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-8">
        Meet Our Team
      </a>
      <a href="#contact" class="cursor-pointer rounded-full border-2 py-3 px-8 border-white text-white hover:bg-white hover:text-purple-900 transition duration-300 ease-in-out">
        Contact Us
      </a>
    </div>
  </div>
</section>

Related Examples

About us card

Author:
Sienna

2 years ago

11.3k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

6 months ago

1.4k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

2 months ago

525
User about me / introduction card
About me card with an image and a short introduction

Author:
Abigail

2 years ago

9.8k
Heading Style

Author:
KULDEEP

1 month ago

311
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

10 months ago

3k
About Us

Author:
KULDEEP

1 month ago

294
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

2 months ago

341
bugger delivary animation
this playground is responsive and animated bugger delivary

Author:
Bonimater

2 months ago

312
about us simple

Author:
QQ-VVN

2 months ago

183
About me section

Author:
Steven Kuhn

2 years ago

17.6k
about video
about kelaplus video

Author:
Omer fils ELENGA

3 weeks ago

57

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components