Meet the Team Section with Team Member Cards

This tailwind example is contributed by Mike Varen, on 13-May-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Card Avatar Feature showcase Team

Author Mike Varen

Tailwind v3.4 5.2k 16

Fork Fullscreen

<section id="our-team" class="bg-gray-100 py-32">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-8 text-primary">Meet Our Team</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            
            <div class="bg-white rounded-lg shadow-md p-6 my-6 text-center">
                <img src="https://spacema-dev.com/elevate/assets/images/team/1.jpg" alt="Team Member 1" class="w-full rounded-full mb-4">
                <h3 class="text-xl font-semibold mb-2">John Doe</h3>
                <p class="text-gray-700">Role: Software Engineer</p>
            </div>

<div class="bg-white rounded-lg shadow-md p-6 my-6 text-center">
                <img src="https://spacema-dev.com/elevate/assets/images/team/4.jpg" alt="Team Member 2" class="w-full rounded-full mb-4">
                <h3 class="text-xl font-semibold mb-2">Jane Smith</h3>
                <p class="text-gray-700">Role: Graphic Designer</p>
            </div>

<div class="bg-white rounded-lg shadow-md p-6 my-6 text-center">
                <img src="https://spacema-dev.com/elevate/assets/images/team/3.jpg" alt="Team Member 3" class="w-full rounded-full mb-4">
                <h3 class="text-xl font-semibold mb-2">Alex Johnson</h3>
                <p class="text-gray-700">Role: Marketing Manager</p>
            </div>

<div class="bg-white rounded-lg shadow-md p-6 my-6 text-center">
                <img src="https://spacema-dev.com/elevate/assets/images/team/2.jpg" alt="Team Member 4" class="w-full rounded-full mb-4">
                <h3 class="text-xl font-semibold mb-2">Peter Johnson</h3>
                <p class="text-gray-700">Role: Seo specialist</p>
            </div>

<div class="bg-white rounded-lg shadow-md p-6 my-6 text-center">
                <img src="https://spacema-dev.com/elevate/assets/images/team/5.jpg" alt="Team Member 5" class="w-full rounded-full mb-4">
                <h3 class="text-xl font-semibold mb-2">Emily Brown</h3>
                <p class="text-gray-700">Role: UX Designer</p>
            </div>

<div class="bg-white rounded-lg shadow-md p-6 my-6 text-center">
                <img src="https://spacema-dev.com/elevate/assets/images/team/6.jpg" alt="Team Member 6" class="w-full rounded-full mb-4">
                <h3 class="text-xl font-semibold mb-2">Michael Davis</h3>
                <p class="text-gray-700">Role: Frontend Developer</p>
            </div>

<div class="bg-white rounded-lg shadow-md p-6 my-6 text-center">
                <img src="https://spacema-dev.com/elevate/assets/images/team/7.jpg" alt="Team Member 7" class="w-full rounded-full mb-4">
                <h3 class="text-xl font-semibold mb-2">Sarah Johnson</h3>
                <p class="text-gray-700">Role: Content Writer</p>
            </div>

<div class="bg-white rounded-lg shadow-md p-6 my-6 text-center">
                <img src="https://spacema-dev.com/elevate/assets/images/team/8.jpg" alt="Team Member 8" class="w-full rounded-full mb-4">
                <h3 class="text-xl font-semibold mb-2">David Wilson</h3>
                <p class="text-gray-700">Role: Project Manager</p>
            </div>
        </div>
    </div>
</section>

Related Examples

Responsive Card Section With Hover Effect
added more cards with ui friendly

SAI BENDE

1 year ago

984
Confirmation modal/card

Sophia Baker

3 years ago

16.6k
PLAN SECTION

ABDO-SY

1 year ago

1.7k
PlayStore Style Carousel
PlayStore Style Carousel

Omer fils ELENGA

9 months ago

409
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Shariar Hasan

2 years ago

4k
Monkey card
First tailwind example

muhittin budak

1 year ago

1.6k
Animaitve card
Made a animative card using the html and the ccss

Sufyan jutt

8 months ago

797
Feature Cards Section
showcase key features or benefits with cards.

Anonymous

2 years ago

4.7k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Abhiraj

1 year ago

4.4k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Hamza Atig

1 year ago

1.6k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Abhiraj

1 year ago

2.8k
User avatar with name

Prajwal Hallale

3 years ago

8.1k