<div class="bg-gray-900 relative">
<div class="container mx-auto overflow-hidden min-h-screen relative">
<div class="py-4 px-4">
<h3 class="text-center text-3xl font-bold text-gray-100 pt-8">
Dont take our word for it
</h3>
<span class="block text-indigo-600 text-4xl mt-2 text-center font-black">Trust our customers</span>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-16">
<div>
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1474176857210-7287d38d27c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHVzZXIlMjBmYWNlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
</div>
<div class="hidden md:block">
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHVzZXIlMjBmYWNlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fHVzZXIlMjBmYWNlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
</div>
<div class="hidden lg:block">
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1474176857210-7287d38d27c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHVzZXIlMjBmYWNlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
<div class="bg-gray-800 p-4 rounded-md shadow mb-8">
<div class="relative">
<img
class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-400">23rd April, 2022</span>
</div>
</div>
</div>
</div>
</div>
<span class="hidden md:block absolute h-2/3 bottom-0 left-0 w-full bg-gradient-to-t from-gray-900 to-transparent z-10"></span>
</div>
const Testimonials = () => {
return (
<div className="bg-gray-900 relative">
<div className="container mx-auto overflow-hidden min-h-screen relative">
<div className="py-4 px-4">
<h3 className="text-center text-3xl font-bold text-gray-100 pt-8">
Dont take our word for it
</h3>
<span className="block text-indigo-600 text-4xl mt-2 text-center font-black">
Trust our customers
</span>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-16">
<div>
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1474176857210-7287d38d27c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHVzZXIlMjBmYWNlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
</div>
<div className="hidden md:block">
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHVzZXIlMjBmYWNlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fHVzZXIlMjBmYWNlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
</div>
<div className="hidden lg:block">
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1474176857210-7287d38d27c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHVzZXIlMjBmYWNlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
<div className="bg-gray-800 p-4 rounded-md shadow mb-8">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-gray-200">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-400 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-400">
23rd April, 2022
</span>
</div>
</div>
</div>
</div>
</div>
<span className="hidden md:block absolute h-2/3 bottom-0 left-0 w-full bg-gradient-to-t from-gray-900 to-transparent z-10" />
</div>
);
}
export default Testimonials;