Team section

with team member's social accounts

This tailwind example is contributed by Ron Hicks, on 17-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Team

Author Ron Hicks

Tailwind v3.4 12.3k 10

Fork Fullscreen

<div class="text-center bg-white">
                <img class="w-100" src="https://images.pexels.com/photos/1587014/pexels-photo-1587014.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">
                <div class="p-4">
                    <div class="text-md">
                        <a href="#"
                            class="hover:text-indigo-500 text-gray-900 font-semibold transition duration-500 ease-in-out">Mehdi
                            Mohammadi</a>
                        <p class="text-gray-500 uppercase text-sm">Web developer</p>
                    </div>
                    <div class="my-4 flex justify-center items-center">
                        <a href="#">

</div>
                </div>

</div>
            <div class="text-center bg-white">
                <img class="w-100" src="https://images.pexels.com/photos/2897883/pexels-photo-2897883.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">
                <div class="p-4">
                    <div class="text-md">
                        <a href="#"
                            class="hover:text-indigo-500 text-gray-900 font-semibold transition duration-500 ease-in-out">Yahya
                            R. Makarim</a>
                        <p class="text-gray-500 uppercase text-sm">president &amp; CEO</p>
                    </div>
                    <div class="my-4 flex justify-center items-center">
                        <a href="#">

</div>
                </div>

</div>
            <div class="text-center bg-white">
                <img class="w-100" src="https://images.pexels.com/photos/3778680/pexels-photo-3778680.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">
                <div class="p-4">
                    <div class="text-md">
                        <a href="#"
                            class="hover:text-indigo-500 text-gray-900 font-semibold transition duration-500 ease-in-out">Ahmad
                            Sultani</a>
                        <p class="text-gray-500 uppercase text-sm">Web designer</p>
                    </div>
                    <div class="my-4 flex justify-center items-center">
                        <a href="#">

</div>
                </div>

</div>

</div>
</div>

Related Examples

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
Our Team section

Ron Hicks

3 years ago

10.4k
Tailwind Team section

Leon Bachmann

3 years ago

10.8k
Team Hero Section with Carousel
A clean and responsive hero section featuring an experts carousel built with Tailwind CSS, Swiper, and Alpine.js. The section highlights key experts with contact details and a clear call-to-action, making it ideal for landing pages and service-focused websites.

Juraj

7 months ago

507
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

KULDEEP

1 year ago

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

Ameth Galarcio

1 year ago

2.3k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

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

INGRIDE MUZIRANENGE

1 year ago

1.5k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

605
Team Showcase

KULDEEP

1 year ago

1.6k