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

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.5k
Team section
with team member's social accounts

Author:
Ron Hicks

3 years ago

11.9k
Meet the team section

Author:
Sienna

3 years ago

12.8k
Team section with cards

Author:
Ron Hicks

3 years ago

11.4k
Our Team section

Author:
Ron Hicks

3 years ago

10k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.6k
Team Members

Author:
Abdul Baset Bappy

8 months ago

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

Author:
Juraj

1 month ago

67
Team Section

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

1 year ago

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

Author:
Mike Varen

1 year ago

4.4k
Jobs recommended for you
This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

705
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

9 months ago

642

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components