Sections
Tailwind CSS Team Sections - Madhuranjan UI
Explore our collection of team section designs. Each template is crafted to showcase your team members in an engaging and visually appealing way, giving visitors a glimpse of your company's culture.
Simple Team Card
A clean and straightforward layout to highlight individual team members.
1 <div class="mx-auto w-full px-4 py-5">
2 <h2 class="mb-5 text-center text-3xl font-bold text-gray-900 dark:text-white">Our Creative Team</h2>
3 <div class="flex flex-wrap justify-center gap-4">
4
5 <div class="flex w-60 flex-col items-center rounded-xl bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl dark:bg-gray-800">
6 <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Alice Green" class="mb-4 h-32 w-32 rounded-full border-4 border-violet-100 object-cover dark:border-blue-900" />
7 <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Alice Green</h3>
8 <p class="mb-4 text-sm text-gray-500 dark:text-gray-300">Marketing Lead</p>
9 <div class="mt-2 flex gap-4">
10 <a href="#" class="text-gray-500 transition-colors hover:text-violet-600 dark:hover:text-blue-400">Team Section with Description
Combines team profiles with descriptive text to provide context and background.
1<div class="flex items-center justify-center gap-4 p-4">
2 <div class="flex items-center justify-center rounded-xl bg-gray-100 dark:bg-gray-900">
3 <div class="w-full max-w-xs overflow-hidden rounded-lg bg-white shadow-md dark:bg-gray-800">
4 <img class="h-56 w-full object-cover" src="https://randomuser.me/api/portraits/women/79.jpg" alt="Profile Photo" />
5
6 <div class="p-6">
7 <h3 class="text-xl font-bold text-gray-900 dark:text-white">Lauren Brooks</h3>
8 <p class="text-sm text-gray-500 dark:text-gray-400">CEO & Co-Founder</p>
9
10 <p class="mt-3 text-sm text-gray-600 dark:text-gray-300">Lauren drives the technical strategy of our platform and brand, ensuring top performance and innovation for all products and services.</p>Beautiful Responsive Team Card
A visually appealing team card designed to capture attention with style.
Sam Monic |Founder
I’ve established pagedone in 2022 and it was one of the best ideas I’ve had in my life.
Harshita Patel |Co-Founder & CEO
I am the co founder of pagedone and we’ve pushed our limit so far to make it successful.
Radhika Lesli |Sales Chief
I’m the chief executive of sales and closed valuable deals that helped pagedone in growth.
Alexa Kimberly |Lead Designer
I am the co founder of pagedone and we’ve pushed our limit so far to make it successful.
Jim Carry |Product Manager
I’ve been lead designer for pagedone since the beginning of it and enjoyed every bit.
1<div class="bg-gray-50 p-8 dark:bg-gray-900">
2 <div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
3 <div class="flex flex-col rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
4 <div class="flex items-start justify-between">
5 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Photo" class="h-14 w-14 rounded-full object-cover" />
6 <div class="flex space-x-4 text-gray-500 dark:text-gray-400">
7 <a href="#" class="transition-colors duration-200 hover:text-gray-800 dark:hover:text-gray-200">
8 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
9 <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
10 </svg>Circle Card Team Page
A modern layout featuring circular cards for a unique team presentation.
Meet the Brains
These people work on making our product best.
1<div class="bg-gray-50 p-2 text-gray-900 dark:bg-gray-900 dark:text-white">
2 <div class="mb-5 text-center">
3 <h2 class="mb-2 text-3xl font-bold">Meet the Brains</h2>
4 <p class="text-gray-600 dark:text-gray-400">These people work on making our product best.</p>
5 </div>
6
7 <div class="flex flex-wrap items-center justify-center gap-4 p-2">
8 <div class="relative flex w-[350px] flex-col items-center rounded-full bg-white p-8 shadow-lg dark:bg-gray-800">
9 <div class="h-28 w-28 overflow-hidden rounded-full ring-4 ring-gray-300 dark:ring-gray-700">
10 <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Profile" class="h-full w-full object-cover" />Meet Our Team
A comprehensive page designed to showcase your team with detailed profiles.
Meet Our Team
A talented group of professionals dedicated to excellence.
Michael Foster
Co-Founder / CTO
Technology visionary with 10+ years of experience
Dries Vincent
Business Relations
Building partnerships that drive growth
Lindsay Walton
Front-end Developer
Crafting beautiful, responsive interfaces
Courtney Henry
Designer
Creating visually stunning experiences
Tom Cook
Director of Product
Shaping the future of our products
Whitney Francis
Copywriter
Words that inspire and engage
Leonard Krasner
Senior Designer
Elevating design to an art form
Floyd Miles
Principal Designer
Visionary design leadership
1<div class="mx-auto px-4 py-12 sm:px-6 lg:px-8 dark:bg-gray-900">
2 <div class="text-center">
3 <p class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Meet Our Team</p>
4 <p class="mx-auto mt-4 max-w-2xl text-xl text-gray-600 dark:text-gray-300">A talented group of professionals dedicated to excellence.</p>
5 </div>
6
7 <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
8 <div class="group relative overflow-hidden rounded-2xl bg-white shadow-xl transition-all duration-500 hover:shadow-2xl dark:bg-gray-800">
9 <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-blue-600 opacity-0 transition-opacity duration-500 group-hover:opacity-20"></div>
10 <div class="p-6 text-center">