Home
Muhammad Umair Arshad
Enhanced Student Testimonials Section

Enhanced Student Testimonials Section

A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

This tailwind example is contributed by Muhammad Umair Arshad, on 09-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are endorsement,review

Card Testimonial Other Grid

Author Muhammad Umair Arshad

128

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Testimonials Section</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
        href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap"
        rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'tab-purple': '#7C3AED',
                        'tab-teal': '#06B6D4',
                    },
                    fontFamily: {
                        'playfair': ['Playfair Display', 'serif'],
                        'inter': ['Inter', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        @keyframes float {

0%,
            100% {
                transform: translateY(0px);
            }

50% {
                transform: translateY(-10px);
            }
        }

@keyframes glow {

0%,
            100% {
                box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
            }

50% {
                box-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
            }
        }

@keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.floating {
            animation: float 6s ease-in-out infinite;
        }

.glow-effect {
            animation: glow 3s ease-in-out infinite alternate;
        }

.animate-slide-in {
            animation: slideInUp 0.6s ease-out forwards;
        }

.testimonial-card {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.gradient-text {
            background: linear-gradient(135deg, #7C3AED, #06B6D4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.star-rating {
            filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
        }

.quote-mark {
            background: linear-gradient(135deg, #7C3AED, #06B6D4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 4rem;
            line-height: 1;
            opacity: 0.3;
        }
    </style>
</head>

<section class="pt-16 pb-20 relative min-h-screen flex flex-col justify-center">
        
        <div class="absolute inset-0 overflow-hidden -z-10">
            <div
                class="absolute top-10 left-10 w-72 h-72 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 floating">
            </div>
            <div class="absolute top-0 right-10 w-72 h-72 bg-teal-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 floating"
                style="animation-delay: -2s;"></div>
            <div class="absolute bottom-10 left-1/2 w-72 h-72 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 floating"
                style="animation-delay: -4s;"></div>
        </div>

<div class="max-w-7xl mx-auto px-6 relative z-10">
            
            <div class="text-center mb-12 px-4">
                <div class="inline-block p-2 rounded-full bg-gradient-to-r from-purple-100 to-teal-100 mb-4">
                    <div class="bg-white rounded-full px-4 py-1">
                        <span class="text-xs sm:text-sm font-semibold gradient-text">SUCCESS STORIES</span>
                    </div>
                </div>

<h1
                    class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 font-playfair leading-tight mb-4">
                    What Our <span class="gradient-text block sm:inline">Students Say</span>
                </h1>

<p class="text-base sm:text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
                    Don't just take our word for it. Here's what our incredible students have to say about their
                    transformative learning experience.
                </p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8">

<div
                    class="testimonial-card relative rounded-2xl shadow-xl overflow-hidden group hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 glow-effect">
                    <div class="absolute top-4 left-4 quote-mark">"</div>
                    <div class="p-8 pt-16">
                        <div class="flex mb-6 star-rating">
                            <span class="text-yellow-400 text-xl">★★★★★</span>
                        </div>
                        <p class="text-gray-700 mb-6 leading-relaxed italic">
                            "This platform completely transformed my musical journey. The instructors are
                            world-class and the personalized approach made all the difference."
                        </p>
                        <div class="flex items-center">
                            <div class="relative">
                                <img
                                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80"
                                    alt="Rajesh Kumar"
                                    class="w-12 h-12 rounded-full object-cover border-2 border-purple-200" />
                                <div
                                    class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white">
                                </div>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900">Rajesh Kumar</h4>
                                <p class="text-sm text-gray-500">Music Student</p>
                            </div>
                        </div>
                        <div
                            class="absolute top-4 right-4 bg-gradient-to-r from-purple-500 to-teal-500 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            Classical Music
                        </div>
                    </div>
                </div>

<div class="testimonial-card relative rounded-2xl shadow-xl overflow-hidden group hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
                    style="animation-delay: 0.2s;">
                    <div class="absolute top-4 left-4 quote-mark">"</div>
                    <div class="p-8 pt-16">
                        <div class="flex mb-6 star-rating">
                            <span class="text-yellow-400 text-xl">★★★★★</span>
                        </div>
                        <p class="text-gray-700 mb-6 leading-relaxed italic">
                            "The dance classes here are incredible! I've grown so much as a performer and gained
                            confidence I never knew I had."
                        </p>
                        <div class="flex items-center">
                            <div class="relative">
                                <img
                                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80"
                                    alt="Priya Singh"
                                    class="w-12 h-12 rounded-full object-cover border-2 border-purple-200" />
                                <div
                                    class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white">
                                </div>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900">Priya Singh</h4>
                                <p class="text-sm text-gray-500">Dance Student</p>
                            </div>
                        </div>
                        <div
                            class="absolute top-4 right-4 bg-gradient-to-r from-pink-500 to-purple-500 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            Dance
                        </div>
                    </div>
                </div>

<div class="testimonial-card relative rounded-2xl shadow-xl overflow-hidden group hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
                    style="animation-delay: 0.4s;">
                    <div class="absolute top-4 left-4 quote-mark">"</div>
                    <div class="p-8 pt-16">
                        <div class="flex mb-6 star-rating">
                            <span class="text-yellow-400 text-xl">★★★★★</span>
                        </div>
                        <p class="text-gray-700 mb-6 leading-relaxed italic">
                            "The acting workshops are phenomenal. The techniques I learned here landed me my first
                            professional role!"
                        </p>
                        <div class="flex items-center">
                            <div class="relative">
                                <img
                                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80"
                                    alt="Vikram Mehta"
                                    class="w-12 h-12 rounded-full object-cover border-2 border-purple-200" />
                                <div
                                    class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white">
                                </div>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900">Vikram Mehta</h4>
                                <p class="text-sm text-gray-500">Acting Student</p>
                            </div>
                        </div>
                        <div
                            class="absolute top-4 right-4 bg-gradient-to-r from-teal-500 to-blue-500 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            Acting
                        </div>
                    </div>
                </div>

<div class="testimonial-card relative rounded-2xl shadow-xl overflow-hidden group hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
                    style="animation-delay: 0.6s;">
                    <div class="absolute top-4 left-4 quote-mark">"</div>
                    <div class="p-8 pt-16">
                        <div class="flex mb-6 star-rating">
                            <span class="text-yellow-400 text-xl">★★★★★</span>
                        </div>
                        <p class="text-gray-700 mb-6 leading-relaxed italic">
                            "My photography skills improved dramatically! The mentorship program is worth every
                            penny. Highly recommend!"
                        </p>
                        <div class="flex items-center">
                            <div class="relative">
                                <img
                                    src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80"
                                    alt="Aisha Kapoor"
                                    class="w-12 h-12 rounded-full object-cover border-2 border-purple-200" />
                                <div
                                    class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white">
                                </div>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900">Aisha Kapoor</h4>
                                <p class="text-sm text-gray-500">Photography Student</p>
                            </div>
                        </div>
                        <div
                            class="absolute top-4 right-4 bg-gradient-to-r from-orange-500 to-red-500 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            Photography
                        </div>
                    </div>
                </div>
            </div>

<div
                class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16 p-8 bg-white/60 backdrop-blur-sm rounded-2xl shadow-lg">
                <div class="text-center">
                    <div class="text-3xl font-bold gradient-text mb-2">500+</div>
                    <div class="text-gray-600 text-sm">Happy Students</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold gradient-text mb-2">4.9★</div>
                    <div class="text-gray-600 text-sm">Average Rating</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold gradient-text mb-2">15+</div>
                    <div class="text-gray-600 text-sm">Expert Instructors</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold gradient-text mb-2">98%</div>
                    <div class="text-gray-600 text-sm">Success Rate</div>
                </div>
            </div>

<div class="text-center mt-16">
                <a href="/testimonials"
                    class="group relative inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-600 to-teal-600 text-white font-semibold rounded-full shadow-2xl transform transition-all duration-300 hover:scale-105 hover:shadow-3xl">
                    <span class="relative z-10">Read All Success Stories</span>
                    <svg class="ml-3 w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none"
                        stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                    <div
                        class="absolute inset-0 bg-gradient-to-r from-purple-700 to-teal-700 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    </div>
                </a>
            </div>
        </div>
    </section>

</body>

</html>

Related Examples