Home
KULDEEP
About Us

About Us

This tailwind example is contributed by KULDEEP, on 21-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is about me

Hero About us

Author KULDEEP

594

Fork Fullscreen

<div class="max-w-7xl mx-auto relative z-20 grid md:grid-cols-2 gap-12 items-center">
    
    <div class="p-8 bg-white bg-opacity-90 rounded-xl shadow-lg backdrop-blur-lg hover:scale-105 transform transition duration-300 ease-in-out">
      <h2 class="text-4xl font-extrabold text-gray-800 mb-4">About Us</h2>
      <p class="text-gray-600 mb-6 text-lg">
        We craft innovative digital experiences that elevate your brand and inspire your audience. Our passionate team leverages creativity and cutting-edge technology to bring your vision to life with precision and style.
      </p>
      <div class="space-y-6">
        
        <div class="flex items-center space-x-4 p-4 bg-gradient-to-tr from-purple-200 via-blue-200 to-green-200 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
          <div class="p-3 bg-white rounded-full shadow-lg hover:scale-110 transform transition duration-300">
            
            <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
              <path d="M17 20v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2H17z" />
              <circle cx="12" cy="8" r="4" />
            </svg>
          </div>
          <div>
            <h3 class="text-xl font-semibold text-gray-700">Dedicated Team</h3>
            <p class="text-gray-500 text-sm">A passionate group of experts committed to delivering excellence in every project.</p>
          </div>
        </div>

<div class="flex items-center space-x-4 p-4 bg-gradient-to-tr from-purple-200 via-blue-200 to-green-200 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
          <div class="p-3 bg-white rounded-full shadow-lg hover:scale-110 transform transition duration-300">
            
            <svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M9 21h6v-1H9v1zm3-18a4 4 0 00-4 4c0 1.38.56 2.63 1.46 3.54A5.978 5.978 0 009 12h6a5.978 5.978 0 00-1.46-3.46A4 4 0 0015 7a4 4 0 00-4-4z" />
            </svg>
          </div>
          <div>
            <h3 class="text-xl font-semibold text-gray-700">Innovative Approach</h3>
            <p class="text-gray-500 text-sm">We embrace creativity and technology to craft unique solutions tailored for you.</p>
          </div>
        </div>

<div class="flex items-center space-x-4 p-4 bg-gradient-to-tr from-purple-200 via-blue-200 to-green-200 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
          <div class="p-3 bg-white rounded-full shadow-lg hover:scale-110 transform transition duration-300">
            
            <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
              <path d="M16 14c-1.33 0-2.53.53-3.41 1.39A4.993 4.993 0 0012 20c1.33 0 2.53-.53 3.41-1.39A4.993 4.993 0 0016 14zM8 14c-1.33 0-2.53.53-3.41 1.39A4.993 4.993 0 004 20c1.33 0 2.53-.53 3.41-1.39A4.993 4.993 0 008 14zM12 4c-2.21 0-4 1.79-4 4 0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3 0-2.21-1.79-4-4-4z" />
            </svg>
          </div>
          <div>
            <h3 class="text-xl font-semibold text-gray-700">Customer Centric</h3>
            <p class="text-gray-500 text-sm">Your satisfaction is our priority — we listen, adapt, and deliver beyond expectations.</p>
          </div>
        </div>
      </div>
    </div>

<div class="relative p-4">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-blue-400 to-green-400 rounded-xl shadow-lg transform hover:scale-105 transition-transform duration-300"></div>
      <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="About Us" class="relative rounded-xl shadow-xl object-cover w-full h-full hover:opacity-90 transition-opacity duration-300" />
    </div>
  </div>
</section>

Related Examples

Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.8k
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.6k
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

9 months ago

1.8k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

8 months ago

1.4k
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

5 months ago

518
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

4 months ago

769
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

295
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

168
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

4k
Banner - Hero - Splash Section

Author:
ABDO-SY

8 months ago

804
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

856
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components