Our Team section

This tailwind example is contributed by Ron Hicks, on 24-Dec-2022. Component is made with Tailwind v3.4. It is responsive.

Team

Author Ron Hicks

Tailwind v3.4 10.5k 13

Fork Fullscreen

<li class="bg-gray-100 p-5 py-10 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink-0">
                            <a
                                href="#"><img class="mb-3 rounded-full mx-auto h-24 w-24" src="https://i.pravatar.cc/150?img=32"></a>
                        </div>
                        <div class="text-center">
                            <h4
                                class="text-lg leading-6 font-semibold text-gray-900 transition duration-500 ease-in-out">
                                <a href="#" class="hover:text-indigo-600 transition duration-500 ease-in-out">jane
                                    doe</a>
                            </h4>
                            <p class="text-sm leading-6 text-gray-500 uppercase">
                                web developer
                            </p>
                        </div>
                    </div>
                </li>
                <li class="bg-gray-100 p-5 py-10 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink-0">
                            <a
                                href="#"><img class="mb-3 rounded-full mx-auto h-24 w-24" src="https://i.pravatar.cc/150?img=32"></a>
                        </div>
                        <div class="text-center">
                            <h4
                                class="text-lg leading-6 font-semibold text-gray-900 transition duration-500 ease-in-out">
                                <a href="#" class="hover:text-indigo-600 transition duration-500 ease-in-out">jane
                                    doe</a>
                            </h4>
                            <p class="text-sm leading-6 text-gray-500 uppercase">
                                web developer
                            </p>
                        </div>
                    </div>
                </li>
                <li class="bg-gray-100 p-5 py-10 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink-0">
                            <a
                                href="#"><img class="mb-3 rounded-full mx-auto h-24 w-24" src="https://i.pravatar.cc/150?img=32"></a>
                        </div>
                        <div class="text-center">
                            <h4
                                class="text-lg leading-6 font-semibold text-gray-900 transition duration-500 ease-in-out">
                                <a href="#" class="hover:text-indigo-600 transition duration-500 ease-in-out">jane
                                    doe</a>
                            </h4>
                            <p class="text-sm leading-6 text-gray-500 uppercase">
                                web developer
                            </p>
                        </div>
                    </div>
                </li>
                <li class="bg-gray-100 p-5 py-10 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink-0">
                            <a
                                href="#"><img class="mb-3 rounded-full mx-auto h-24 w-24" src="https://i.pravatar.cc/150?img=32"></a>
                        </div>
                        <div class="text-center">
                            <h4
                                class="text-lg leading-6 font-semibold text-gray-900 transition duration-500 ease-in-out">
                                <a href="#" class="hover:text-indigo-600 transition duration-500 ease-in-out">jane
                                    doe</a>
                            </h4>
                            <p class="text-sm leading-6 text-gray-500 uppercase">
                                web developer
                            </p>
                        </div>
                    </div>
                </li>

</ul>
        </div>

<div class="text-left mb-10 sm:ml-10 md:ml-24 sm:w-6/12 order-first sm:order-last">
            <p class="mt-4 text-sm leading-7 text-gray-500 font-regular">
                THE TEAM
            </p>
            <h3 class="text-3xl sm:text-5xl leading-normal font-extrabold tracking-tight text-gray-900">
                Meet Our <span class="text-indigo-600">Team</span>
            </h3>
            <p class="mt-4 text-md leading-7 text-gray-500 font-light">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque,
                iste dolor cupiditate blanditiis ratione.
                <br><br> Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </p>

</div>

</div>
</div>

Related Examples

Team section
with team member's social accounts

Ron Hicks

3 years ago

12.3k
Team section
responsive project team section

Ron Hicks

3 years ago

11.1k
Meet the team section

Sienna

3 years ago

13.4k
Team section with cards

Ron Hicks

3 years ago

11.9k
Tailwind Team section

Leon Bachmann

3 years ago

10.8k
canvas fully covers
canvas fully covers

Balogun David Olajuwon

1 year ago

1.3k
Team Showcase

KULDEEP

1 year ago

1.6k
hero modern
hero modern

Omer fils ELENGA

10 months ago

844
Jobs recommended for you
This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
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.

Ayyamperumal S

1 year ago

3.2k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

2 years ago

4.1k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k