Tailwind Team section

This tailwind example is contributed by Leon Bachmann, on 24-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Team

Author Leon Bachmann

Tailwind v3.4 10.8k 14

Fork Fullscreen

<div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-screen-xl py-12">
    <div class="">
        <h3
            class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
            Our Team
        </h3>
        <p class="mt-4 max-w-3xl mx-auto text-center text-xl leading-7 text-gray-500">
            sub heading
        </p>
    </div>

</div>

<div class="ml-4">
                            <h2 class="text-xl font-semibold text-gray-500">
                                Cory Zue
                            </h2>
                            <div class="text-gray-400 text-sm">
                                Building an internet empire, one side-project at a time
                            </div>
                            <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap">
                                <div class="mt-2 flex items-center leading-5 text-gray-400 sm:mr-6 text-sm">
                                    <svg class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
                                            clip-rule="evenodd"></path>
                                        <path
                                            d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z">
                                        </path>
                                    </svg>
                                    7
                                    projects
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

</div>

<div class="ml-4">
                            <h2 class="text-xl font-semibold text-gray-500">
                                Pat Walls
                            </h2>
                            <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap">
                                <div class="mt-2 flex items-center leading-5 text-gray-400 sm:mr-6 text-sm">
                                    <svg class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
                                            clip-rule="evenodd"></path>
                                        <path
                                            d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z">
                                        </path>
                                    </svg>
                                    11
                                    projects
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

</div>

<div class="ml-4">
                            <h2 class="text-xl font-semibold text-gray-500">
                                Sharath Kuruganty
                            </h2>
                            <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap">
                                <div class="mt-2 flex items-center leading-5 text-gray-400 sm:mr-6 text-sm">
                                    <svg class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
                                            clip-rule="evenodd">
                                        </path>
                                        <path
                                            d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z">
                                        </path>
                                    </svg>
                                    8
                                    projects
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Team section
responsive project team section

Ron Hicks

3 years ago

11.1k
Team section
with team member's social accounts

Ron Hicks

3 years ago

12.3k
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.5k
Team section - Htmlwind
Team section with round images

Htmlwind

1 year ago

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

Abhiraj

1 year ago

3k
basichtml
this is basic html

Anonymous

1 year ago

925
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
Avatar
Avatar

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

2 years ago

5.2k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k
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

INGRIDE MUZIRANENGE

1 year ago

842