Testimonial 1 TailwindCSS
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;
}