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

325

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

12.7k
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.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.5k
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

6 months ago

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

Author:
ORGIN_DREAMS

2 months ago

210
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

2 months ago

469
work hard
by salvator

Author:
Baraka Salvator

2 months ago

109
booking room or chamber
reflesh, freedom,sleeping,good vibes, etc.........

Author:
Uwase Alliance

2 months ago

319
Portfolio Hero Section 5

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

4 months ago

1.3k
About Us Component

Author:
KULDEEP

1 month ago

385
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.3k
Hero example simply beautiful

Author:
Lucas Martinez

2 years ago

13.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components