Home
Ishimwe Shadad
barbershop

barbershop

This tailwind example is contributed by Ishimwe Shadad, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Ishimwe Shadad

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AFRO CUTS | Premium African Barbershop</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0a0a0a;
            color: #fff;
            overflow-x: hidden;
        }
        
        .gold-accent {
            color: #d4af37;
        }
        
        .gold-border {
            border-color: #d4af37;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 3rem;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 3px;
            background: #d4af37;
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: #d4af37;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover:after {
            width: 100%;
        }
        
        .service-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #222;
            background: rgba(20, 20, 20, 0.7);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
            border-color: #d4af37;
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(212, 175, 55, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .barber-card {
            position: relative;
            overflow: hidden;
        }
        
        .barber-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 1.5rem;
            background: linear-gradient(transparent, rgba(0,0,0,0.9));
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .barber-card:hover .barber-info {
            transform: translateY(0);
        }
        
        .btn-gold {
            background: #d4af37;
            color: #000;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-gold:hover {
            background: #b8941f;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
        }
        
        .btn-outline-gold {
            border: 2px solid #d4af37;
            color: #d4af37;
            background: transparent;
            transition: all 0.3s ease;
        }
        
        .btn-outline-gold:hover {
            background: #d4af37;
            color: #000;
        }
        
        .hero-slider {
            position: relative;
            height: 100vh;
            overflow: hidden;
        }
        
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
        }
        
        .slide.active {
            opacity: 1;
        }
        
        .slide-content {
            position: absolute;
            bottom: 20%;
            left: 10%;
            max-width: 600px;
            opacity: 0;
            transform: translateY(50px);
            transition: all 1s ease;
        }
        
        .slide.active .slide-content {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.5s;
        }
        
        .testimonial-card {
            background: rgba(30, 30, 30, 0.7);
            border-left: 3px solid #d4af37;
        }
        
        .form-input {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid #333;
            color: #fff;
            transition: border-color 0.3s ease;
        }
        
        .form-input:focus {
            border-color: #d4af37;
            outline: none;
        }
        
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 50px;
            border: 2px solid #d4af37;
            border-radius: 15px;
            display: flex;
            justify-content: center;
        }
        
        .scroll-indicator:before {
            content: '';
            position: absolute;
            top: 10px;
            width: 4px;
            height: 10px;
            background: #d4af37;
            border-radius: 2px;
            animation: scroll 2s infinite;
        }
        
        @keyframes scroll {
            0% { transform: translateY(0); opacity: 1; }
            100% { transform: translateY(15px); opacity: 0; }
        }
        
        .hair-style-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .hair-style-card {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            height: 300px;
        }
        
        .hair-style-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .hair-style-card:hover img {
            transform: scale(1.1);
        }
        
        .style-name {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            font-weight: 600;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .hair-style-card:hover .style-name {
            transform: translateY(0);
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-black text-white">
    
    <nav class="fixed w-full z-50 bg-black/90 backdrop-blur-sm py-4">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <div class="text-2xl font-bold">
                <span class="gold-accent">AFRO</span> CUTS
            </div>
            
            <div class="hidden md:flex space-x-8">
                <a href="#home" class="nav-link">Home</a>
                <a href="#services" class="nav-link">Services</a>
                <a href="#styles" class="nav-link">Hair Styles</a>
                <a href="#gallery" class="nav-link">Gallery</a>
                <a href="#barbers" class="nav-link">Our Barbers</a>
                <a href="#contact" class="nav-link">Contact</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <a href="#contact" class="btn-gold px-6 py-2 rounded-full text-sm">Book Now</a>
                <button class="md:hidden text-white" id="mobileMenuButton">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        
        <div class="md:hidden hidden bg-black/95 absolute w-full left-0 top-16 py-4" id="mobileMenu">
            <div class="container mx-auto px-6 flex flex-col space-y-4">
                <a href="#home" class="nav-link py-2">Home</a>
                <a href="#services" class="nav-link py-2">Services</a>
                <a href="#styles" class="nav-link py-2">Hair Styles</a>
                <a href="#gallery" class="nav-link py-2">Gallery</a>
                <a href="#barbers" class="nav-link py-2">Our Barbers</a>
                <a href="#contact" class="nav-link py-2">Contact</a>
            </div>
        </div>
    </nav>

<section id="home" class="hero-slider">
        
        <div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1580618672591-eb180b1a973f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80')">
            <div class="slide-content">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    PRECISION <span class="gold-accent">CUTS</span><br>FOR THE MODERN AFRICAN MAN
                </h1>
                <p class="text-gray-300 mb-8 text-lg">
                    Experience the art of traditional African barbering with a modern twist. Our master barbers deliver precision cuts, fades, and grooming services in a sophisticated atmosphere.
                </p>
                <div class="flex space-x-4">
                    <a href="#contact" class="btn-gold px-8 py-3 rounded-full">Book Appointment</a>
                    <a href="#services" class="btn-outline-gold px-8 py-3 rounded-full">Our Services</a>
                </div>
            </div>
        </div>
        
        
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1567899378493-507a38f6c4c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
            <div class="slide-content">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    MASTER <span class="gold-accent">BARBERS</span><br>WITH YEARS OF EXPERIENCE
                </h1>
                <p class="text-gray-300 mb-8 text-lg">
                    Our skilled barbers specialize in all African hair types and styles, from traditional cuts to contemporary fades and designs.
                </p>
                <div class="flex space-x-4">
                    <a href="#barbers" class="btn-gold px-8 py-3 rounded-full">Meet Our Barbers</a>
                    <a href="#gallery" class="btn-outline-gold px-8 py-3 rounded-full">View Gallery</a>
                </div>
            </div>
        </div>
        
        
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1598706640393-8bc6bcd2ab6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80')">
            <div class="slide-content">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    PREMIUM <span class="gold-accent">GROOMING</span><br>FOR THE DISCERNING GENTLEMAN
                </h1>
                <p class="text-gray-300 mb-8 text-lg">
                    From beard shaping to hot towel shaves, we offer a complete grooming experience using the finest products.
                </p>
                <div class="flex space-x-4">
                    <a href="#styles" class="btn-gold px-8 py-3 rounded-full">View Styles</a>
                    <a href="#contact" class="btn-outline-gold px-8 py-3 rounded-full">Get Directions</a>
                </div>
            </div>
        </div>
        
        <div class="scroll-indicator"></div>
        
        
        <div class="absolute bottom-10 right-10 flex space-x-4">
            <button class="slider-control bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center" id="prevSlide">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="slider-control bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center" id="nextSlide">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </section>

<section id="services" class="py-20">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">OUR SERVICES</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-cut"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Classic African Cut</h3>
                    <p class="text-gray-400 mb-4">Precision cut with clippers and scissors, tailored for African hair texture and styles.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">35,000 RWF</span>
                        <span class="text-gray-400">45 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-user"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Beard Trim & Design</h3>
                    <p class="text-gray-400 mb-4">Expert beard shaping, trimming and creative designs for a sharp, defined look.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">20,000 RWF</span>
                        <span class="text-gray-400">30 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-spa"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Royal Shave</h3>
                    <p class="text-gray-400 mb-4">Traditional straight razor shave with hot towels and premium African shea products.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">30,000 RWF</span>
                        <span class="text-gray-400">40 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-air-freshener"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Hair Coloring</h3>
                    <p class="text-gray-400 mb-4">Professional hair coloring services using premium products designed for African hair.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">50,000 RWF</span>
                        <span class="text-gray-400">90 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-child"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Kids Cut</h3>
                    <p class="text-gray-400 mb-4">Specialized cuts for young gentlemen in a comfortable, friendly environment.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">25,000 RWF</span>
                        <span class="text-gray-400">35 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-crown"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Executive Package</h3>
                    <p class="text-gray-400 mb-4">The complete grooming experience: haircut, shave, and facial treatment.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">70,000 RWF</span>
                        <span class="text-gray-400">120 min</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="styles" class="py-20 bg-gray-900">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">AFRICAN HAIR STYLES</h2>
            <p class="text-gray-400 max-w-3xl mb-12 fade-in">We specialize in all types of African hair styles, from traditional cuts to contemporary designs. Browse our portfolio of popular styles.</p>
            
            <div class="hair-style-grid">
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="High Top Fade">
                    <div class="style-name">High Top Fade</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Taper Fade">
                    <div class="style-name">Taper Fade</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Curly Fro">
                    <div class="style-name">Curly Fro</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Twist Out">
                    <div class="style-name">Twist Out</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Line Up">
                    <div class="style-name">Precision Line Up</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Design Fade">
                    <div class="style-name">Design Fade</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Cornrows">
                    <div class="style-name">Cornrows</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Dreadlocks">
                    <div class="style-name">Dreadlocks</div>
                </div>
            </div>
        </div>
    </section>

<section id="gallery" class="py-20">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">OUR GALLERY</h2>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-12">
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1599351431202-1e0f0137899a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80" 
                         alt="Barber at work" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
                         alt="Beard trimming" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80" 
                         alt="Barbershop interior" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
                         alt="Hair styling" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                         alt="Haircut process" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1598706640393-8bc6bcd2ab6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                         alt="Barber tools" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1633144332628-c13503661e8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                         alt="Finished style" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1622287162716-f311baa1a2b8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                         alt="Barber portrait" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="barbers" class="py-20 bg-gray-900">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">MEET OUR BARBERS</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
                <div class="barber-card rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1562164986-3e6c8d41e0e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                         alt="Kwame Osei" class="w-full h-96 object-cover">
                    <div class="barber-info">
                        <h3 class="text-xl font-bold">Kwame Osei</h3>
                        <p class="gold-accent mb-2">Master Barber / Owner</p>
                        <p class="text-gray-300 text-sm">15+ years of experience specializing in traditional African cuts and modern fades.</p>
                    </div>
                </div>
                
                <div class="barber-card rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                         alt="Chijioke Adebayo" class="w-full h-96 object-cover">
                    <div class="barber-info">
                        <h3 class="text-xl font-bold">Chijioke Adebayo</h3>
                        <p class="gold-accent mb-2">Senior Barber</p>
                        <p class="text-gray-300 text-sm">Expert in creative designs, beard artistry, and contemporary African styles.</p>
                    </div>
                </div>
                
                <div class="barber-card rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                         alt="Tendai Moyo" class="w-full h-96 object-cover">
                    <div class="barber-info">
                        <h3 class="text-xl font-bold">Tendai Moyo</h3>
                        <p class="gold-accent mb-2">Style Specialist</p>
                        <p class="text-gray-300 text-sm">Specializes in precision cuts, hair coloring, and braiding techniques.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">CLIENT TESTIMONIALS</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
                <div class="testimonial-card p-6 rounded-lg fade-in">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
                        <div>
                            <h4 class="font-bold">Samuel Nkosi</h4>
                            <div class="gold-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-300">"Best barbershop in Kigali. Kwame gave me the perfect fade and my beard has never looked better. The atmosphere is premium and the service is exceptional."</p>
                </div>
                
                <div class="testimonial-card p-6 rounded-lg fade-in">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
                        <div>
                            <h4 class="font-bold">David Mugisha</h4>
                            <div class="gold-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-300">"Chijioke is a true artist. He transformed my look completely. The attention to detail is unmatched. I won't go anywhere else for my haircuts."</p>
                </div>
                
                <div class="testimonial-card p-6 rounded-lg fade-in">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
                        <div>
                            <h4 class="font-bold">Robert Uwimana</h4>
                            <div class="gold-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-300">"The Royal Shave experience is worth every franc. Hot towels, premium products, and the closest shave I've ever had. This is luxury grooming at its finest."</p>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-gray-900">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">BOOK YOUR APPOINTMENT</h2>
            
            <div class="grid md:grid-cols-2 gap-12 mt-12">
                <div class="fade-in">
                    <h3 class="text-2xl font-bold mb-6">CONTACT INFORMATION</h3>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="gold-accent text-xl mr-4 mt-1">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">OUR LOCATION</h4>
                                <p class="text-gray-300">123 KN Street, Kiyovu<br>Kigali, Rwanda</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="gold-accent text-xl mr-4 mt-1">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">PHONE NUMBER</h4>
                                <p class="text-gray-300">+250 788 123 456</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="gold-accent text-xl mr-4 mt-1">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">EMAIL ADDRESS</h4>
                                <p class="text-gray-300">hello@afrocuts.rw</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="gold-accent text-xl mr-4 mt-1">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">OPENING HOURS</h4>
                                <p class="text-gray-300">
                                    Mon - Fri: 8:00 AM - 8:00 PM<br>
                                    Saturday: 9:00 AM - 6:00 PM<br>
                                    Sunday: 10:00 AM - 4:00 PM
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="fade-in">
                    <h3 class="text-2xl font-bold mb-6">BOOK NOW</h3>
                    
                    <form class="space-y-6">
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <input type="text" placeholder="First Name" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                            <div>
                                <input type="text" placeholder="Last Name" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                        </div>
                        
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <input type="email" placeholder="Email Address" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                            <div>
                                <input type="tel" placeholder="Phone Number" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                        </div>
                        
                        <div>
                            <select class="form-input w-full px-4 py-3 rounded-lg">
                                <option value="">Select Service</option>
                                <option value="haircut">Classic African Cut - 35,000 RWF</option>
                                <option value="beard">Beard Trim & Design - 20,000 RWF</option>
                                <option value="shave">Royal Shave - 30,000 RWF</option>
                                <option value="color">Hair Coloring - 50,000 RWF</option>
                                <option value="kids">Kids Cut - 25,000 RWF</option>
                                <option value="executive">Executive Package - 70,000 RWF</option>
                            </select>
                        </div>
                        
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <input type="date" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                            <div>
                                <input type="time" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                        </div>
                        
                        <div>
                            <textarea placeholder="Additional Notes" rows="4" class="form-input w-full px-4 py-3 rounded-lg"></textarea>
                        </div>
                        
                        <button type="submit" class="btn-gold w-full py-3 rounded-lg font-bold">BOOK APPOINTMENT</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-black py-12 border-t border-gray-800">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-2xl font-bold mb-4">
                        <span class="gold-accent">AFRO</span> CUTS
                    </h3>
                    <p class="text-gray-400 mb-4">Precision cuts for the modern African gentleman. Experience the art of traditional barbering with a contemporary edge.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">QUICK LINKS</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#home" class="hover:text-white transition-colors">Home</a></li>
                        <li><a href="#services" class="hover:text-white transition-colors">Services</a></li>
                        <li><a href="#styles" class="hover:text-white transition-colors">Hair Styles</a></li>
                        <li><a href="#gallery" class="hover:text-white transition-colors">Gallery</a></li>
                        <li><a href="#barbers" class="hover:text-white transition-colors">Our Barbers</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">SERVICES</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors">Classic African Cut</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Beard Trim & Design</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Royal Shave</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Hair Coloring</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Kids Cut</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">NEWSLETTER</h4>
                    <p class="text-gray-400 mb-4">Subscribe to receive updates on special offers and grooming tips.</p>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="form-input flex-grow px-4 py-2 rounded-l-lg">
                        <button class="btn-gold px-4 rounded-r-lg">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                <p>&copy; 2023 AFRO CUTS. All rights reserved.</p>
            </div>
        </div>
    </footer>

Related Examples

Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

10 months ago

1.3k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

6 months ago

462
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.3k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

7 months ago

509
Pricing Plans

Author:
ariaw

2 months ago

205
ServerHub Interface

Author:
МОЙДОЫР

3 weeks ago

305
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

6 months ago

631
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

10k
Dionysus AI Chat

Author:
Maxim

2 months ago

332
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.7k
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

6 months ago

919
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

2 months ago

224

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components