Home
KULDEEP
Team Showcase

Team Showcase

This tailwind example is contributed by KULDEEP, on 17-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Profile Team

Author KULDEEP

174

Fork Fullscreen

<section class="py-16 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4">
    
    <div class="text-center mb-12">
      <h2 class="text-4xl font-bold text-gray-900 mb-4">Meet The Instructors</h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        Learn from industry professionals with years of experience in their respective fields
      </p>
    </div>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      
      
      <div class="relative overflow-hidden group bg-white rounded-xl shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
        
        <div class="aspect-w-3 aspect-h-4 bg-gray-200 rounded-xl overflow-hidden relative">
          <img 
            src="https://images.unsplash.com/photo-1531123414780-f74242c2b052?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" 
            alt="Rajesh Kumar" 
            class="w-full h-full object-cover object-center"
          />
          
          <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </div>
        
        <div class="p-4">
          <h3 class="font-playfair text-xl font-semibold mb-2">Rajesh Kumar</h3>
          <p class="text-tab-purple mb-4">Classical Music Director</p>
        </div>
        
        <div class="absolute bottom-0 left-0 right-0 bg-white p-4 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out shadow-lg rounded-t-lg">
          <p class="text-sm text-gray-700">
            With over 20 years of experience in classical music, Rajesh has performed on international stages and trained hundreds of students.
          </p>
        </div>
      </div>
      
      
      <div class="relative overflow-hidden group bg-white rounded-xl shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
        <div class="aspect-w-3 aspect-h-4 bg-gray-200 rounded-xl overflow-hidden relative">
          <img 
            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" 
            alt="Priya Singh" 
            class="w-full h-full object-cover object-center"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </div>
        <div class="p-4">
          <h3 class="font-playfair text-xl font-semibold mb-2">Priya Singh</h3>
          <p class="text-tab-purple mb-4">Dance Instructor</p>
        </div>
        <div class="absolute bottom-0 left-0 right-0 bg-white p-4 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out shadow-lg rounded-t-lg">
          <p class="text-sm text-gray-700">
            Priya is a celebrated dancer specializing in both classical and contemporary styles with numerous awards to her name.
          </p>
        </div>
      </div>
      
      
      <div class="relative overflow-hidden group bg-white rounded-xl shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
        <div class="aspect-w-3 aspect-h-4 bg-gray-200 rounded-xl overflow-hidden relative">
          <img 
            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" 
            alt="Vikram Mehta" 
            class="w-full h-full object-cover object-center"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </div>
        <div class="p-4">
          <h3 class="font-playfair text-xl font-semibold mb-2">Vikram Mehta</h3>
          <p class="text-tab-purple mb-4">Acting Coach</p>
        </div>
        <div class="absolute bottom-0 left-0 right-0 bg-white p-4 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out shadow-lg rounded-t-lg">
          <p class="text-sm text-gray-700">
            A veteran of stage and screen, Vikram brings his 15 years of industry experience to nurture the next generation of actors.
          </p>
        </div>
      </div>
      
      
      <div class="relative overflow-hidden group bg-white rounded-xl shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
        <div class="aspect-w-3 aspect-h-4 bg-gray-200 rounded-xl overflow-hidden relative">
          <img 
            src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" 
            alt="Aisha Kapoor" 
            class="w-full h-full object-cover object-center"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </div>
        <div class="p-4">
          <h3 class="font-playfair text-xl font-semibold mb-2">Aisha Kapoor</h3>
          <p class="text-tab-purple mb-4">Photography Mentor</p>
        </div>
        <div class="absolute bottom-0 left-0 right-0 bg-white p-4 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out shadow-lg rounded-t-lg">
          <p class="text-sm text-gray-700">
            Award-winning photographer Aisha specializes in portrait and fashion photography with publications in leading magazines.
          </p>
        </div>
      </div>
      
    </div>
    
    <div class="text-center mt-12">
      <a href="/team" class="inline-block bg-tab-purple text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:bg-tab-teal transition-colors duration-300 transform hover:-translate-y-1">
        View All Instructors
      </a>
    </div>
  </div>
</section>

Related Examples

Avatar
Avatar

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

1 year ago

4.3k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

3.4k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

9 months ago

2.9k
Cards - Users Card DaddyBrasil
Users card grid list - daddybrasil.com.br

Author:
Casimiro Rocha

8 months ago

1.9k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

7 months ago

2.9k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

5 months ago

1.4k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

4 months ago

1.1k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

1 month ago

284
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)

1 month ago

81
Team Members

Author:
Abdul Baset Bappy

2 weeks ago

98
User Profile Card
This User Profile Card includes: 1. Responsive design using Tailwind CSS classes 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support with appropriate color adjustments 4. Profile picture with hover effect 5. User name, job title, and a brief description 6. Social media icons with hover effects 7. Skill tags with hover animations 8. Connect button with hover effect 9. Subtle animations and transitions for better user experience 10. Automatic dark mode detection based on system preferences Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - The profile picture has a border that changes color in dark mode - Social media icons and skill tags have hover effects - The Connect button uses Indigo-800 with a Blue-900 hover state - The entire card has a shadow effect that changes on hover - Dark mode is automatically applied based on system preferences This design provides a clean, professional look for a user profile card while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

8 months ago

1.3k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

61.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components