<section class="py-24 2xl:py-44 bg-blueGray-100 rounded-t-10xl overflow-hidden">
<div class="container px-4 mx-auto">
<span class="text-xs text-gray-300 uppercase tracking-wide">What people say</span>
<h1 class="mt-8 mb-14 md:mb-24 text-8xl md:text-10xl xl:text-11xl font-heading font-medium leading-tight">Testimonials</h1>
<div class="flex flex-wrap -mx-2 mb-14">
<div class="w-full xl:w-3/5 px-2 mb-4 xl:mb-0">
<div class="flex items-center h-full py-12 px-8 bg-white rounded-3xl">
<div class="flex flex-wrap items-center justify-between w-full -mx-2">
<div class="w-full md:w-auto px-2 mb-4 md:mb-0">
<a class="block mx-auto max-w-max" href="#">
<img class="h-24 object-cover" src="uinel-assets/images/ecommerce-reviews/product-phone1.png" alt="">
</a>
</div>
<div class="w-full md:w-auto px-2 mb-8 md:mb-0">
<a class="block mb-2 text-2xl xl:text-3xl font-heading font-medium hover:underline" href="#">Apple iPhone 12 Pro</a>
<div class="flex">
<p class="text-sm font-heading font-medium mr-2">
<span>Color:</span>
<span class="text-darkBlueGray-300">Silver</span>
</p>
<p class="text-sm font-heading font-medium">
<span>Memory storage:</span>
<span class="text-darkBlueGray-300">128GB</span>
</p>
</div>
</div>
<div class="w-full md:w-auto px-2 mb-8 md:mb-0">
<p class="text-xl text-blue-500 font-heading font-medium">$ 720,70</p>
</div>
<div class="w-full md:w-auto px-2"><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-8 font-heading font-medium tracking-tighter text-xl text-white bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Add to cart</a></div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/5 px-2 mb-4 md:mb-0">
<div class="py-12 px-12 h-full bg-white rounded-3xl">
<p class="font-heading font-medium">
<span class="text-9xl">4.3</span>
<span class="text-gray-300">/5</span>
</p>
<div class="flex mb-3">
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block text-gray-200" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="currentColor"></path>
</svg>
</a>
</div>
<p class="text-sm text-gray-300 font-medium">1 218 reviews</p>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/5 px-2">
<div class="py-12 px-12 h-full bg-white rounded-3xl">
<p class="font-heading font-medium">
<span class="text-9xl">4.1</span>
<span class="text-gray-300">/5</span>
</p>
<div class="flex mb-3">
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block text-gray-200" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="currentColor"></path>
</svg>
</a>
</div>
<p class="text-sm text-gray-300 font-medium">Uistore</p>
</div>
</div>
</div>
<a class="inline-block mb-14 text-3xl font-heading font-medium underline hover:text-darkBlueGray-700" href="#">1,218 reviews</a>
<div class="mb-2 shadow-lg rounded-t-8xl rounded-b-5xl overflow-hidden">
<div class="pt-3 pb-3 md:pb-1 px-4 md:px-16 bg-white bg-opacity-40">
<div class="flex flex-wrap items-center">
<img class="mr-6" src="uinel-assets/images/ecommerce-reviews/user.png" alt="">
<h4 class="w-full md:w-auto text-xl font-heading font-medium">Faustina H. Fawn</h4>
<div class="w-full md:w-px h-2 md:h-8 mx-8 bg-transparent md:bg-gray-200"></div>
<span class="mr-4 text-xl font-heading font-medium">5.0</span>
<div class="inline-flex">
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block text-gray-200" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="px-4 overflow-hidden md:px-16 pt-8 pb-12 bg-white">
<div class="flex flex-wrap">
<div class="w-full md:w-2/3 mb-6 md:mb-0">
<p class="mb-8 max-w-2xl text-darkBlueGray-400 leading-loose">I haretra neque non mi aliquam, finibus hart bibendum molestie. Vestibulum suscipit sagittis dignissim mauris.</p>
<div class="-mb-2">
<div class="inline-flex w-full md:w-auto md:mr-2 mb-2">
<div class="flex items-center h-12 pl-2 pr-6 bg-green-100 border-2 border-green-500 rounded-full">
<div class="flex mr-2 w-8 h-8 items-center justify-center bg-white rounded-full text-green-500">
<svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.016 6.366H6.38V10.092H4.472V6.366H0.836V4.638H4.472V0.911999H6.38V4.638H10.016V6.366Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-green-500 font-heading font-medium">battery life</span>
</div>
</div>
<div class="inline-flex w-full md:w-auto md:mr-2 mb-2">
<div class="flex items-center h-12 pl-2 pr-6 bg-green-100 border-2 border-green-500 rounded-full">
<div class="flex mr-2 w-8 h-8 items-center justify-center bg-white rounded-full text-green-500">
<svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.016 6.366H6.38V10.092H4.472V6.366H0.836V4.638H4.472V0.911999H6.38V4.638H10.016V6.366Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-green-500 font-heading font-medium">functionality</span>
</div>
</div>
<div class="inline-flex w-full md:w-auto mb-2">
<div class="flex items-center h-12 pl-2 pr-6 bg-green-100 border-2 border-green-500 rounded-full">
<div class="flex mr-2 w-8 h-8 items-center justify-center bg-white rounded-full text-green-500">
<svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.016 6.366H6.38V10.092H4.472V6.366H0.836V4.638H4.472V0.911999H6.38V4.638H10.016V6.366Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-green-500 font-heading font-medium">ease of use</span>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 text-right">
<p class="mb-8 text-sm text-gray-300">Added 2 months ago</p>
</div>
</div>
</div>
</div>
<div class="mb-2 shadow-lg rounded-t-8xl rounded-b-5xl overflow-hidden">
<div class="pt-3 pb-3 md:pb-1 px-4 md:px-16 bg-white bg-opacity-40">
<div class="flex flex-wrap items-center">
<img class="mr-6" src="uinel-assets/images/ecommerce-reviews/user2.png" alt="">
<h4 class="w-full md:w-auto text-xl font-heading font-medium">Ainsley Stones</h4>
<div class="w-full md:w-px h-2 md:h-8 mx-8 bg-transparent md:bg-gray-200"></div>
<span class="mr-4 text-xl font-heading font-medium">4.3</span>
<div class="flex">
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block text-gray-200" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="px-4 md:px-16 pt-8 pb-12 bg-white">
<div class="flex flex-wrap">
<div class="w-full md:w-2/3 mb-6 md:mb-0">
<p class="mb-8 max-w-2xl text-darkBlueGray-400 leading-loose">I haretra neque non mi aliquam, finibus hart bibendum molestie. Morbi facilisis neque in condimentum malesuada. Vestibulum suscipit sagittis dignissim mauris.</p>
<div class="-mb-2">
<div class="inline-flex w-full md:w-auto md:mr-2 mb-2">
<div class="flex items-center h-12 pl-2 pr-6 bg-green-100 border-2 border-green-500 rounded-full">
<div class="flex mr-2 w-8 h-8 items-center justify-center bg-white rounded-full text-green-500">
<svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.016 6.366H6.38V10.092H4.472V6.366H0.836V4.638H4.472V0.911999H6.38V4.638H10.016V6.366Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-green-500 font-heading font-medium">battery life</span>
</div>
</div>
<div class="inline-flex w-full md:w-auto md:mr-2 mb-2">
<div class="flex items-center h-12 pl-2 pr-6 bg-green-100 border-2 border-green-500 rounded-full">
<div class="flex mr-2 w-8 h-8 items-center justify-center bg-white rounded-full text-green-500">
<svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.016 6.366H6.38V10.092H4.472V6.366H0.836V4.638H4.472V0.911999H6.38V4.638H10.016V6.366Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-green-500 font-heading font-medium">functionality</span>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 text-right">
<p class="mb-8 text-sm text-gray-300">Added 2 months ago</p>
</div>
</div>
</div>
</div>
<div class="mb-14 md:mb-24 shadow-lg rounded-t-8xl rounded-b-5xl overflow-hidden">
<div class="pt-3 pb-3 md:pb-1 px-4 md:px-16 bg-white bg-opacity-40">
<div class="flex flex-wrap items-center">
<img class="mr-6" src="uinel-assets/images/ecommerce-reviews/user3.png" alt="">
<h4 class="w-full md:w-auto text-xl font-heading font-medium">Jasmine Joy</h4>
<div class="w-full md:w-px h-2 md:h-8 mx-8 bg-transparent md:bg-gray-200"></div>
<span class="mr-4 text-xl font-heading font-medium">5.0</span>
<div class="flex">
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block mr-1" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="#FFCB00"></path>
</svg>
</a>
<a class="inline-block text-gray-200" href="#">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.91677H12.4167L10 0.416763L7.58333 7.91677H0L6.18335 12.3168L3.81668 19.5834L10 15.0834L16.1834 19.5834L13.8167 12.3168L20 7.91677Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="px-4 md:px-16 pt-8 pb-12 bg-white">
<div class="flex flex-wrap">
<div class="w-full md:w-2/3 mb-6 md:mb-0">
<p class="mb-8 max-w-2xl text-darkBlueGray-400 leading-loose">I haretra neque non mi aliquam, finibus hart bibendum molestie. Vestibulum suscipit sagittis dignissim mauris.</p>
<div class="-mb-2">
<div class="inline-flex w-full md:w-auto md:mr-2 mb-2">
<div class="flex items-center h-12 pl-2 pr-6 bg-green-100 border-2 border-green-500 rounded-full">
<div class="flex mr-2 w-8 h-8 items-center justify-center bg-white rounded-full text-green-500">
<svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.016 6.366H6.38V10.092H4.472V6.366H0.836V4.638H4.472V0.911999H6.38V4.638H10.016V6.366Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-green-500 font-heading font-medium">battery life</span>
</div>
</div>
<div class="inline-flex w-full md:w-auto md:mr-2 mb-2">
<div class="flex items-center h-12 pl-2 pr-6 bg-green-100 border-2 border-green-500 rounded-full">
<div class="flex mr-2 w-8 h-8 items-center justify-center bg-white rounded-full text-green-500">
<svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.016 6.366H6.38V10.092H4.472V6.366H0.836V4.638H4.472V0.911999H6.38V4.638H10.016V6.366Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-green-500 font-heading font-medium">functionality</span>
</div>
</div>
<div class="inline-flex w-full md:w-auto mb-2">
<div class="flex items-center h-12 pl-2 pr-6 bg-green-100 border-2 border-green-500 rounded-full">
<div class="flex mr-2 w-8 h-8 items-center justify-center bg-white rounded-full text-green-500">
<svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.016 6.366H6.38V10.092H4.472V6.366H0.836V4.638H4.472V0.911999H6.38V4.638H10.016V6.366Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-green-500 font-heading font-medium">ease of use</span>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 text-right">
<p class="mb-8 text-sm text-gray-300">Added 2 months ago</p>
</div>
</div>
</div>
</div>
<div class="text-center">
<button class="inline-block w-full md:w-auto h-full py-4 px-10 leading-8 font-heading font-medium tracking-tighter text-xl text-white bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl">See all</button>
</div>
</div>
</section>