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

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

3 years ago

11.8k
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Author:
Bonimater

9 months ago

796
About Company Section – Animated & Responsive
A modern "About Us" section built with Tailwind CSS and Alpine.js, designed to highlight your company’s story, achievements, and values through a clean and animated layout. This component features smooth scroll animations, responsive design, and a balanced two-column layout — one for text content and one for an image with company stats. It’s perfect for corporate websites, SaaS platforms, or startup landing pages that want to showcase professionalism and credibility. ✨ Key Features Elegant fade-in and slide-up animations using Alpine.js Responsive grid layout optimized for all screen sizes Dark mode support built-in Dynamic stats display (years, team size, countries served) Clean Tailwind CSS design with easy customization

Author:
wavy kits

4 months ago

498
Coming Soon Countdown Section – Animated & Responsive
A beautifully designed "Coming Soon" landing section built with Tailwind CSS and Alpine.js, perfect for startups, SaaS platforms, and product launches. This component features a live countdown timer, smooth fade-in animations, and floating gradient effects for a futuristic, engaging look. The layout adapts seamlessly to all screen sizes and supports dark mode, creating a professional pre-launch experience that builds anticipation and excitement. ✨ Key Features ⏳ Dynamic countdown timer (days, hours, minutes, seconds) 🎨 Animated gradient orbs for a vibrant background effect 🌙 Dark mode support included 💨 Smooth entrance animations using Alpine.js 📱 Fully responsive design for all devices 🔗 Social media icons to keep your audience connected 💡 Perfect for: Coming Soon or Under Construction pages Product and SaaS pre-launch sites Portfolio or agency landing pages Event or app launch countdowns

Author:
Anonymous

3 months ago

161
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.9k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

6 months ago

470
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

9 months ago

709
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4.2k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

4 months ago

738
thyis is my play ground
this playground is responsive

Author:
bonheur dev

9 months ago

595
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

1 year ago

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

Author:
ORGIN_DREAMS

9 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components