Home
Ron Hicks
Our Team section

Our Team section

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

Team

Author Ron Hicks

9.9k

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

Author:
Ron Hicks

3 years ago

11.9k
Team section
responsive project team section

Author:
Ron Hicks

3 years ago

10.4k
Meet the team section

Author:
Sienna

3 years ago

12.7k
Team section with cards

Author:
Ron Hicks

3 years ago

11.4k
Tailwind Team section

Author:
Leon Bachmann

3 years ago

10.2k
Team Showcase

Author:
KULDEEP

9 months ago

853
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
hero modern
hero modern

Author:
Omer fils ELENGA

1 month ago

128
Greenwood high school
To empower students to achieve academic excellence, develop strong character, and become responsible global citizens through innovative teaching, personalized learning, and a commitment to lifelong growth.

Author:
INGRIDE MUZIRANENGE

9 months ago

875
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.5k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

9 months ago

926
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components