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

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

2 years ago

11.6k
Team section
responsive project team section

Author:
Ron Hicks

2 years ago

10.1k
Meet the team section

Author:
Sienna

2 years ago

12.4k
Team section with cards

Author:
Ron Hicks

2 years ago

11k
Tailwind Team section

Author:
Leon Bachmann

2 years ago

10k
CYBERNARA
Cybernara is a futuristic design style that blends cyberpunk elements with traditional Japanese aesthetics, creating a unique digital experience. Let me break down the key aspects of this approach

Author:
Anonymous

5 months ago

646
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

5 months ago

470
TRADING COMMODITY
used for buying and selling of raw materials or primary agricultural products. These goods are typically standardized and interchangeable with other goods of the same type, making them suitable for trading on organized exchanges

Author:
INGRIDE MUZIRANENGE

5 months ago

345
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

9 months ago

823
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

3.6k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

8 months ago

1.6k
Hotel management
dashboard used in hotel management system

Author:
Frederick250

5 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components