Home
Leon Bachmann
Tailwind Team section

Tailwind Team section

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

Team

Author Leon Bachmann

10.2k

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

Author:
Ron Hicks

3 years ago

10.2k
Team section
with team member's social accounts

Author:
Ron Hicks

3 years ago

11.9k
Meet the team section

Author:
Sienna

2 years ago

12.7k
Team section with cards

Author:
Ron Hicks

3 years ago

11.2k
Our Team section

Author:
Ron Hicks

3 years ago

9.9k
Hotel management
dashboard used in hotel management system

Author:
Frederick250

8 months ago

2.3k
Avatar
Avatar

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

1 year ago

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

Author:
Abhiraj

1 year ago

1.9k
hero modern
hero modern

Author:
Omer fils ELENGA

3 weeks ago

64
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

1 year ago

1.7k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.3k
Timeline
timeline with journey

Author:
Abhiraj

1 year ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components