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

This tailwind example is contributed by Sahil Sasapara, on 22-May-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Front page,about me

Hero Grid Landing Page About us

Author Sahil Sasapara

Tailwind v3.4 5.7k 9

Fork Fullscreen

<div class="bg-white">
      <header class="bg-green-500 text-white text-center py-12">
        <h1 class="text-4xl font-bold mt-16">About Us</h1>
      </header>

<section class="text-center py-12 px-4">
        <h2 class="text-2xl font-bold">Mission And Values</h2>
        <p class="mt-4 text-gray-700 max-w-2xl mx-auto">
          Our mission is to provide exceptional healthcare services with a focus on availability, reliability, and support.
        </p>
        <div class="flex justify-center space-x-8 mt-8 animate-fadeIn">
          <div class="transition transform hover:scale-110">
            <h3 class="text-xl font-bold" >85+</h3>
            <p class="text-gray-700">Specialists</p>
          </div>
          <div class="transition transform hover:scale-110">
            <h3 class="text-xl font-bold" >25+</h3>
            <p class="text-gray-700">Years of Experience</p>
          </div>
        </div>
      </section>

<section class="bg-green-500 text-white py-12 px-4">
        <h2 class="text-2xl font-bold text-center">Our Vision</h2>
        <p class="mt-4 text-center max-w-2xl mx-auto">
          Healthcare anytime, anywhere. We aim to revolutionize the healthcare industry by making quality healthcare accessible to everyone.
        </p>
      </section>

<section class="text-center py-12 px-4">
        <h2 class="text-2xl font-bold">Our Healthcare Specialties</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 mt-8">
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Cardiology</h3>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Neurology</h3>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Pediatrics</h3>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Oncology</h3>
          </div>
        </div>
      </section>

<section class="bg-gray-100 py-12 px-4">
        <h2 class="text-2xl font-bold text-center">State-Of-The-Art Technology</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8 max-w-5xl mx-auto">
          <div class="p-4 shadow-lg rounded-lg bg-white hover:shadow-xl transition-shadow">
            <h3 class="text-xl font-bold">Advanced Diagnostics</h3>
            <p class="text-gray-700 mt-2">We utilize the latest technology for accurate diagnostics.</p>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-white hover:shadow-xl transition-shadow">
            <h3 class="text-xl font-bold">Telemedicine</h3>
            <p class="text-gray-700 mt-2">Consult with our specialists from the comfort of your home.</p>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-white hover:shadow-xl transition-shadow">
            <h3 class="text-xl font-bold">Robotic Surgery</h3>
            <p class="text-gray-700 mt-2">Minimally invasive procedures with precision.</p>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-white hover:shadow-xl transition-shadow">
            <h3 class="text-xl font-bold">Electronic Health Records</h3>
            <p class="text-gray-700 mt-2">Secure and easy access to your medical records.</p>
          </div>
        </div>
      </section>

<section class="text-center py-12 px-4">
        <h2 class="text-2xl font-bold">Committed To Your Health And Happiness</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 mt-8">
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Book Appointment</h3>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Informed Staff</h3>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Total Health</h3>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Get Consultation</h3>
          </div>
        </div>
      </section>

<section class="bg-green-500 text-white text-center py-12 px-4">
        <h2 class="text-2xl font-bold">Patient Testimonials</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-8 max-w-5xl mx-auto">
          <div class="p-4 shadow-lg rounded-lg bg-green-600 hover:bg-green-500 transition-colors">
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique mi."</p>
            <h3 class="mt-4 font-bold">- Patient A</h3>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-600 hover:bg-green-500 transition-colors">
            <p>"Nullam ac augue eget diam posuere vehicula. Vivamus quis nulla ac justo euismod posuere."</p>
            <h3 class="mt-4 font-bold">- Patient B</h3>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-600 hover:bg-green-500 transition-colors">
            <p>"Fusce tincidunt, arcu nec vestibulum tincidunt, eros massa ullamcorper urna."</p>
            <h3 class="mt-4 font-bold">- Patient C</h3>
          </div>
        </div>
      </section>

<section class="text-center py-12 px-4 w-full">
        <h2 class="text-2xl font-bold">Get Answer To Your Most Asked Questions</h2>
        <div class="mt-8">
          <div class="p-4 border rounded-lg shadow-md transition transform hover:scale-100 scale-90">
            <h3 class="text-xl font-bold">How do I make an appointment online?</h3>
            <p class="mt-2 text-gray-700">You can book an appointment online through our website or mobile app.</p>
          </div>
          <div class="p-4 border rounded-lg shadow-md transition transform hover:scale-100 scale-90 mt-4">
            <h3 class="text-xl font-bold">What types of medical tests do you offer?</h3>
            <p class="mt-2 text-gray-700">We offer a wide range of medical tests including blood tests, imaging, and more.</p>
          </div>
          <div class="p-4 border rounded-lg shadow-md transition transform hover:scale-100 scale-90 mt-4">
            <h3 class="text-xl font-bold">Do you accept insurance plans?</h3>
            <p class="mt-2 text-gray-700">Yes, we accept most major insurance plans.</p>
          </div>
        </div>
      </section>

<footer class="bg-green-500 text-white text-center py-8">
        <p>&copy; Copyright [Your Name] . All rights reserved. Made By Binary Boats⛵</p>
      </footer>
    </div>

Related Examples

A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Anonymous

3 years ago

10.4k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
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

Amit Pachange

2 years ago

16k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.8k
Hero Beer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.5k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3.1k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

2 years ago

2.7k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Coastal UI

2 years ago

2.4k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
Portfolio Hero Section 4

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

4.9k