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

2 years ago

11.8k
Meet the team section

Author:
Sienna

2 years ago

12.7k
Team section with cards

Author:
Ron Hicks

2 years ago

11.2k
Our Team section

Author:
Ron Hicks

3 years ago

9.7k
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

11 months ago

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

7 months ago

606
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

Author:
KULDEEP

6 months ago

453
Page Not Found
Oops! Page Not Found

Author:
gidy

7 months ago

529
Team Showcase

Author:
KULDEEP

7 months ago

798
CYBERNARA
Cybernara is a futuristic design style that blends cyberpunk elements with traditional Japanese aesthetics, creating a unique digital experience. Let me break down the key aspects of this approach

Author:
Anonymous

7 months ago

701
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components