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

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.2k
Team section
responsive project team section

Author:
Ron Hicks

2 years ago

9.5k
Meet the team section

Author:
Sienna

2 years ago

12k
Team section with cards

Author:
Ron Hicks

2 years ago

10.5k
Tailwind Team section

Author:
Leon Bachmann

2 years ago

9.6k
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

4 months ago

689
Page Not Found
Oops! Page Not Found

Author:
gidy

2 days ago

4
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

3 months ago

306
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

7 months ago

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

Author:
Abhiraj

4 months ago

808
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

4 months ago

1.1k
Avatar
Avatar

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

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components