Testimonial block for displaying client testimonials on websites and landing pages.

Dependencies

  • Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - Testimonial 1</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="testimonial-1 py-4 md:py-12">
        <div class="container mx-auto px-4">
            <div class="md:flex md:flex-wrap md:-mx-4 mb-4">

                <div class="md:w-1/2 md:px-4 mt-6 md:mt-0">
                    <div class="testimonial p-6 border-2 border-solid flex hover:border-indigo-400 hover:bg-indigo-100 transition-colors duration-300">
                        <div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden mr-4 md:mr-6 flex-shrink-0">
                            <img src="//assets.free-website-resources.com/img/profile-01.jpg" alt="Jesse D." class="w-full h-full object-cover">
                        </div>
                        <div>
                            <p class="text-gray-600">"It really saves me time and effort. FWR Bootstrap Blocks is exactly what our business has been lacking. FWR Bootstrap Blocks was worth a fortune to my company. FWR Bootstrap Blocks has really helped our business. I'm good to go."</p>
                            <div class="text-gray-900 font-bold uppercase mt-6">- Jesse D.</div>
                            <div class="text-gray-600">Apple</div>
                        </div>
                    </div>
                </div>

                <div class="md:w-1/2 md:px-4 mt-6 md:mt-0">
                    <div class="testimonial p-6 border-2 border-solid flex hover:border-indigo-400 hover:bg-indigo-100 transition-colors duration-300">
                        <div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden mr-4 md:mr-6 flex-shrink-0">
                            <img src="//assets.free-website-resources.com/img/profile-03.jpg" alt="Annabell M." class="w-full h-full object-cover">
                        </div>
                        <div>
                            <p class="text-gray-600">"Needless to say we are extremely satisfied with the results. Keep up the excellent work. Your company is truly upstanding and is behind its product 100%. Thanks guys, keep up the good work!"</p>
                            <div class="text-gray-900 font-bold uppercase mt-6">- Annabell M.</div>
                            <div class="text-gray-600">Microsoft</div>
                        </div>
                    </div>
                </div>

                <div class="md:w-1/2 md:px-4 mt-6">
                    <div class="testimonial p-6 border-2 border-solid flex hover:border-indigo-400 hover:bg-indigo-100 transition-colors duration-300">
                        <div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden mr-4 md:mr-6 flex-shrink-0">
                            <img src="//assets.free-website-resources.com/img/profile-02.jpg" alt="Candace H." class="w-full h-full object-cover">
                        </div>
                        <div>
                            <p class="text-gray-600">"FWR Bootstrap Blocks is exactly what our business has been lacking. FWR Bootstrap Blocks is both attractive and highly adaptable. Man, this thing is getting better and better as I learn more about it."</p>
                            <div class="text-gray-900 font-bold uppercase mt-6">- Candace H.</div>
                            <div class="text-gray-600">Google</div>
                        </div>
                    </div>
                </div>

                <div class="md:w-1/2 md:px-4 mt-6">
                    <div class="testimonial p-6 border-2 border-solid flex hover:border-indigo-400 hover:bg-indigo-100 transition-colors duration-300">
                        <div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden mr-4 md:mr-6 flex-shrink-0">
                            <img src="//assets.free-website-resources.com/img/profile-07.jpg" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <p class="text-gray-600">"This is simply unbelievable! I use FWR Bootstrap Blocks often. You've saved our business! No matter where you go, FWR Bootstrap Blocks is the coolest, most happening thing around!"</p>
                            <div class="text-gray-900 font-bold uppercase mt-6">- Joe H.</div>
                            <div class="text-gray-600">Facebook</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- /.testimonial-1 -->

    <!-- Scripts -->
</body>
</html>
.testimonial {
  border-radius: 1rem;
}
.testimonial {
  border-radius: 1rem;
}

Similar Blocks

No similar blocks found
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvdGVzdGltb25pYWwvdGVzdGltb25pYWwtMQ==