Testimonials
Get started with a collection of testimonial sections built with Tailwind CSS to show a statement from a customer as an endorsement to other potential clients.
Blockquote example
Use this simple example of a testimonial based on a blockquote element and show the text, customer avatar, name, and occupation.
Blockquote example
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto text-center lg:py-16 lg:px-6">
<figure class="max-w-screen-md mx-auto">
<svg
class="h-12 mx-auto mb-3 text-gray-400 dark:text-gray-600"
viewBox="0 0 24 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
fill="currentColor"
/>
</svg>
<blockquote>
<p class="text-2xl font-medium text-gray-900 dark:text-white">
"Flowbite is just awesome. It contains tons of predesigned components
and pages starting from login screen to complex dashboard. Perfect
choice for your next SaaS application."
</p>
</blockquote>
<figcaption class="flex items-center justify-center mt-6 space-x-3">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png"
alt="profile picture"
/>
<div
class="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700"
>
<div class="pr-3 font-medium text-gray-900 dark:text-white">
Micheal Gough
</div>
<div class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400">
CEO at Google
</div>
</div>
</figcaption>
</figure>
</div>
</section>
<!-- Block end -->Testimonial cards
You can use this example of testimonial cards up to two items on a row and show the title, description, avatar, name, and occupation.
Testimonial cards
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Testimonials</h2>
<p class="mb-8 font-light text-gray-500 lg:mb-16 sm:text-xl dark:text-gray-400">Explore the whole
collection of open-source web components and elements built with the utility classes from Tailwind
</p>
</div>
<div class="grid mb-8 lg:mb-12 lg:grid-cols-2">
<figure
class="flex flex-col justify-center items-center p-8 text-center bg-gray-50 border-b border-gray-200 md:p-12 lg:border-r dark:bg-gray-800 dark:border-gray-700">
<blockquote class="mx-auto mb-8 max-w-2xl text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Speechless with how easy this
was to integrate</h3>
<p class="my-4">"I recently got my hands on Flowbite Pro, and holy crap, I'm speechless with how
easy this was to integrate within my application. Most templates are a pain, code is
scattered, and near impossible to theme.</p>
<p class="my-4">Flowbite has code in one place and I'm not joking when I say it took me a matter
of minutes to copy the code, customise it and integrate within a Laravel + Vue application.
</p>
<p class="my-4">If you care for your time, I hands down would go with this."</p>
</blockquote>
<figcaption class="flex justify-center items-center space-x-3">
<img class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div>Bonnie Green</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">Developer at Open AI</div>
</div>
</figcaption>
</figure>
<figure
class="flex flex-col justify-center items-center p-8 text-center bg-gray-50 border-b border-gray-200 md:p-12 dark:bg-gray-800 dark:border-gray-700">
<blockquote class="mx-auto mb-8 max-w-2xl text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Solid foundation for any project
</h3>
<p class="my-4">"FlowBite provides a robust set of design tokens and components based on the
popular Tailwind CSS framework. From the most used UI components like forms and navigation
bars to the whole app screens designed both for desktop and mobile, this UI kit provides a
solid foundation for any project.</p>
<p class="my-4">Designing with Figma components that can be easily translated to the utility
classes of Tailwind CSS is a huge timesaver!"</p>
</blockquote>
<figcaption class="flex justify-center items-center space-x-3">
<img class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div>Roberta Casas</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">Lead designer at Dropbox
</div>
</div>
</figcaption>
</figure>
<figure
class="flex flex-col justify-center items-center p-8 text-center bg-gray-50 border-b border-gray-200 lg:border-b-0 md:p-12 lg:border-r dark:bg-gray-800 dark:border-gray-700">
<blockquote class="mx-auto mb-8 max-w-2xl text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mindblowing workflow and
variants</h3>
<p class="my-4">"As someone who mainly designs in the browser, I've been a casual user of Figma,
but as soon as I saw and started playing with FlowBite my mind was 🤯.</p>
<p class="my-4">Everything is so well structured and simple to use (I've learnt so much about
Figma by just using the toolkit).</p>
<p class="my-4">Aesthetically, the well designed components are beautiful and will undoubtedly
level up your next application."</p>
</blockquote>
<figcaption class="flex justify-center items-center space-x-3">
<img class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div>Jese Leos</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">Software Engineer at
Facebook</div>
</div>
</figcaption>
</figure>
<figure
class="flex flex-col justify-center items-center p-8 text-center bg-gray-50 border-gray-200 md:p-12 dark:bg-gray-800 dark:border-gray-700">
<blockquote class="mx-auto mb-8 max-w-2xl text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Efficient Collaborating</h3>
<p class="my-4">"This is a very complex and beautiful set of elements. Under the hood it comes
with the best things from 2 different worlds: Figma and Tailwind.</p>
<p class="my-4">You have many examples that can be used to create a fast prototype for your
team."</p>
</blockquote>
<figcaption class="flex justify-center items-center space-x-3">
<img class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div>Joseph McFall</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">CTO at Google</div>
</div>
</figcaption>
</figure>
</div>
<div class="text-center">
<a href="#"
class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Show
more...</a>
</div>
</section>
<!-- Block end -->Testimonial tabs
Get started with an interactive section of testimonials where you can click on the tabs on the left side and show the testimonial text on the right side.
Testimonial tabs
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="gap-16 py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-3 lg:py-16 lg:px-6"
>
<div class="text-gray-500 sm:text-lg dark:text-gray-400">
<ul
class="block mb-3 space-y-4 sm:flex sm:space-y-0 lg:space-y-4 lg:block"
id="testimonialTab"
role="tablist"
>
<li class="md:mr-2 lg:mr-0" role="presentation">
<button
class="p-4 w-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
id="testimonial-1-tab"
type="button"
role="tab"
aria-controls="testimonial-1"
aria-selected="true"
>
<figcaption class="space-y-2">
<div class="flex space-x-2.5">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png"
alt="profile picture"
/>
<div
class="text-lg font-semibold text-gray-900 dark:text-white"
>
Michael Gough
</div>
</div>
<div
class="text-sm font-light text-left text-gray-500 dark:text-gray-400"
>
Web developer at Google
</div>
</figcaption>
</button>
</li>
<li class="md:mr-2 lg:mr-0" role="presentation">
<button
class="p-4 w-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
id="testimonial-2-tab"
type="button"
role="tab"
aria-controls="testimonial-2"
aria-selected="false"
>
<figcaption class="space-y-2">
<div class="flex space-x-2.5">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png"
alt="profile picture"
/>
<div
class="text-lg font-semibold text-gray-900 dark:text-white"
>
Bonnie Green
</div>
</div>
<div
class="text-sm font-light text-left text-gray-500 dark:text-gray-400"
>
CEO at Facebook
</div>
</figcaption>
</button>
</li>
<li class="md:mr-2 lg:mr-0" role="presentation">
<button
class="p-4 w-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
id="testimonial-3-tab"
type="button"
role="tab"
aria-controls="testimonial-3"
aria-selected="false"
>
<figcaption class="space-y-2">
<div class="flex space-x-2.5">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png"
alt="profile picture"
/>
<div
class="text-lg font-semibold text-gray-900 dark:text-white"
>
Lana Byrd
</div>
</div>
<div
class="text-sm font-light text-left text-gray-500 dark:text-gray-400"
>
CTO at Microsoft
</div>
</figcaption>
</button>
</li>
</ul>
<a
class="inline-flex items-center pl-4 text-sm font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
href="#"
>
View other 20 testimonials
<svg
class="ml-1 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div
class="col-span-2 mt-4 divide-y divide-gray-200 dark:divide-gray-700 lg:mt-0"
>
<div id="testimonialTabContent">
<div
class="p-4 rounded-lg"
id="testimonial-1"
role="tabpanel"
aria-labelledby="testimonial-1-tab"
>
<svg
class="mb-3 h-8 text-gray-500 dark:text-gray-600"
viewBox="0 0 24 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
fill="currentColor"
/>
</svg>
<h3
class="mb-3 text-2xl font-bold tracking-tight leading-tight text-gray-900 dark:text-white"
>
It was a great experience!
</h3>
<p
class="mb-3 text-lg font-light leading-relaxed text-gray-500 dark:text-gray-400"
>
Flowbite is just awesome. It contains tons of predesigned components
and pages starting from login screen to complex dashboard. Perfect
choice for your next SaaS application.
</p>
<p
class="text-lg font-light leading-relaxed text-gray-500 dark:text-gray-400"
>
There is absolutely no doubt in my mind that without Flowbite, I
would not have been able to make the jump to Ueno, a digital agency
I started in 2014. The work I got through Flowbite made it possible
for me to have something to build on. We now have about 45 people on
our team, a lot of whom we found and recruited through Flowbite.
</p>
</div>
<div
class="hidden p-4 rounded-lg"
id="testimonial-2"
role="tabpanel"
aria-labelledby="testimonial-2-tab"
>
<svg
class="mb-3 h-8 text-gray-500 dark:text-gray-600"
viewBox="0 0 24 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
fill="currentColor"
/>
</svg>
<h3
class="mb-3 text-2xl font-bold tracking-tight leading-tight text-gray-900 dark:text-white"
>
Best product!
</h3>
<p
class="mb-3 text-lg font-light leading-relaxed text-gray-500 dark:text-gray-400"
>
Flowbite is just awesome. It contains tons of predesigned components
and pages starting from login screen to complex dashboard. Perfect
choice for your next SaaS application.
</p>
<p
class="text-lg font-light leading-relaxed text-gray-500 dark:text-gray-400"
>
I would not have been able to make the jump to Ueno, a digital
agency I started in 2014. The work I got through Flowbite made it
possible for me to have something to build on. We now have about 45
people on our team, a lot of whom we found and recruited through
Flowbite.
</p>
</div>
<div
class="hidden p-4 rounded-lg"
id="testimonial-3"
role="tabpanel"
aria-labelledby="testimonial-3-tab"
>
<svg
class="mb-3 h-8 text-gray-500 dark:text-gray-600"
viewBox="0 0 24 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
fill="currentColor"
/>
</svg>
<h3
class="mb-3 text-2xl font-bold tracking-tight leading-tight text-gray-900 dark:text-white"
>
Great design!
</h3>
<p
class="mb-3 text-lg font-light leading-relaxed text-gray-500 dark:text-gray-400"
>
Flowbite is just awesome. It contains tons of predesigned components
and pages starting from login screen to complex dashboard. Perfect
choice for your next SaaS application.
</p>
<p
class="text-lg font-light leading-relaxed text-gray-500 dark:text-gray-400"
>
There is absolutely no doubt in my mind that without Flowbite, I
would not have been able to make the jump to Ueno, a digital agency
I started in 2014. The work I got through Flowbite made it possible
for me to have something to build on. We now have about 45 people on
our team, a lot of whom we found and recruited through Flowbite.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Block end -->
<script>
// check out the Flowbite Tabs JS behaviour docs for more information: https://flowbite.com/docs/components/tabs/#javascript-behaviour
// create an array of objects with the id, trigger element (eg. button), and the content element
const tabElements = [
{
id: 'testimonial-1',
triggerEl: document.querySelector('#testimonial-1-tab'),
targetEl: document.querySelector('#testimonial-1'),
},
{
id: 'testimonial-2',
triggerEl: document.querySelector('#testimonial-2-tab'),
targetEl: document.querySelector('#testimonial-2'),
},
{
id: 'testimonial-3',
triggerEl: document.querySelector('#testimonial-3-tab'),
targetEl: document.querySelector('#testimonial-3'),
},
]
// options with default values
const options = {
defaultTabId: 'settings',
activeClasses: 'bg-gray-100 dark:bg-gray-700',
inactiveClasses: 'bg-white dark:bg-gray-900',
onShow: () => {
console.log('tab is shown')
},
}
const tabs = new Tabs(tabElements, options)
</script>Carousel slider
Show more testimonial items inside a carousel slider component from the Flowbite library and showcase a text, avatar, name, and occupation.
Carousel slider
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm mb-8 lg:mb-16">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Testimonials
</h2>
<p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">
Explore the whole collection of open-source web components and elements
built with the utility classes from Tailwind
</p>
</div>
<div id="testimonial-carousel" class="relative" data-carousel="slide">
<div
class="overflow-x-hidden overflow-y-visible relative mx-auto max-w-screen-md h-52 rounded-lg sm:h-48"
>
<figure
class="hidden mx-auto w-full max-w-screen-md"
data-carousel-item
>
<blockquote>
<p
class="text-lg font-medium text-gray-900 sm:text-2xl dark:text-white"
>
"Flowbite is just awesome. It contains tons of predesigned
components and pages starting from login screen to complex
dashboard. Perfect choice for your next SaaS application."
</p>
</blockquote>
<figcaption class="flex justify-center items-center mt-6 space-x-3">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
alt="profile picture"
/>
<div
class="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700"
>
<div class="pr-3 font-medium text-gray-900 dark:text-white">
Bonnie Green
</div>
<div
class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400"
>
Web developer at Google
</div>
</div>
</figcaption>
</figure>
<figure
class="hidden mx-auto w-full max-w-screen-md"
data-carousel-item
>
<blockquote>
<p
class="text-lg font-medium text-gray-900 sm:text-2xl dark:text-white"
>
"As someone who mainly designs in the browser, I've been a casual
user of Figma, but as soon as I saw and started playing with
FlowBite my mind was blown and became so productive."
</p>
</blockquote>
<figcaption class="flex justify-center items-center mt-6 space-x-3">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/helene-engels.png"
alt="profile picture"
/>
<div
class="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700"
>
<div class="pr-3 font-medium text-gray-900 dark:text-white">
Helene Engels
</div>
<div
class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400"
>
Creative designer at Adobe
</div>
</div>
</figcaption>
</figure>
<figure
class="hidden mx-auto w-full max-w-screen-md"
data-carousel-item
>
<blockquote>
<p
class="text-lg font-medium text-gray-900 sm:text-2xl dark:text-white"
>
"Flowbite has code in one place and I'm not joking when I say it
took me a matter of minutes to copy the code, customise it and
integrate within a Laravel + Vue application."
</p>
</blockquote>
<figcaption class="flex justify-center items-center mt-6 space-x-3">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/neil-sims.png"
alt="profile picture"
/>
<div
class="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700"
>
<div class="pr-3 font-medium text-gray-900 dark:text-white">
Neil Sims
</div>
<div
class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400"
>
CTO at Microsoft
</div>
</div>
</figcaption>
</figure>
</div>
<div class="flex justify-center items-center">
<button
type="button"
class="flex justify-center items-center mr-4 h-full cursor-pointer group focus:outline-none"
data-carousel-prev
>
<span
class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
>
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="hidden">Previous</span>
</span>
</button>
<button
type="button"
class="flex justify-center items-center h-full cursor-pointer group focus:outline-none"
data-carousel-next
>
<span
class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
>
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="hidden">Next</span>
</span>
</button>
</div>
</div>
</div>
</section>
<!-- Block end -->Grid layout testimonial cards
Showcase up to three testimonial cards for every row and show a title, description, avatar, name, and occupation of the customer making the statement.
Grid layout testimonial cards
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Testimonials
</h2>
<p
class="mb-8 font-light text-gray-500 lg:mb-16 dark:text-gray-400 sm:text-xl"
>
Explore the whole collection of open-source web components and elements
built with the utility classes from Tailwind
</p>
</div>
<div class="grid gap-8 lg:grid-cols-3">
<div class="space-y-6">
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Solid foundation for any project
</h3>
<p class="my-4">
"This is a very complex and beautiful set of elements. Under the
hood it comes with the best things from 2 different worlds: Figma
and Tailwind.”
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Bonnie Green</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
CTO at Open AI
</div>
</div>
</figcaption>
</figure>
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
A must-have for designers
</h3>
<p class="my-4">
"This is a very complex and beautiful set of elements. Under the
hood it comes with the best things from 2 different worlds: Figma
and Tailwind.”
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Lana Byrd</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
Software Engineer at Tesla
</div>
</div>
</figcaption>
</figure>
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Speechless with how easy this was to integrate
</h3>
<p class="my-4">
"I recently got my hands on Flowbite Pro, and holy crap, I'm
speechless with how easy this was to integrate within my
application. Most templates are a pain, code is scattered, and
near impossible to theme."
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Jese Leos</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
CEO at Oracle
</div>
</div>
</figcaption>
</figure>
</div>
<div class="space-y-6">
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Efficient Collaborating
</h3>
<p class="my-4">
"Flowbite is just awesome. It contains tons of predesigned
components and pages starting from login screen to complex
dashboard. Perfect choice for your next SaaS application.”
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Joseph McFall</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
Junior Designer at Adobe
</div>
</div>
</figcaption>
</figure>
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Mindblowing workflow and variants
</h3>
<p class="my-4">
"Flowbite provides a robust set of design tokens and components
based on the popular Tailwind CSS framework.
</p>
<p class="my-4">
From the most used UI components like forms and navigation bars to
the whole app screens designed both for desktop and mobile, this
UI kit provides a solid foundation for any project.”
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/helene-engels.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Helene Engels</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
CFO at Microsoft
</div>
</div>
</figcaption>
</figure>
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Perfect choice for a SaaS application
</h3>
<p class="my-4">
"Flowbite provides a robust set of design tokens and components
based on the popular Tailwind CSS framework.
</p>
<p class="my-4">
From the most used UI components like forms and navigation bars to
the whole app screens designed both for desktop and mobile, this
UI kit provides a solid foundation for any project.”
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/sofia-mcguire.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Leslie Livingston</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
Creative Director at Apple
</div>
</div>
</figcaption>
</figure>
</div>
<div class="space-y-6">
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Solid foundation for any project
</h3>
<p class="my-4">
"I recently got my hands on Flowbite Pro, and holy crap, I'm
speechless with how easy this was to integrate within my
application. Most templates are a pain, code is scattered, and
near impossible to theme."
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Michael Gough</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
Front-end engineer at Meta
</div>
</div>
</figcaption>
</figure>
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Mindblowing workflow and variants
</h3>
<p class="my-4">
"Flowbite is just awesome. It contains tons of predesigned
components and pages starting from login screen to complex
dashboard. Perfect choice for your next SaaS application.”
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/neil-sims.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Neil Sims</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
Software architect at Amazon
</div>
</div>
</figcaption>
</figure>
<figure class="p-6 bg-gray-50 rounded dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Speechless with how easy this was to integrate
</h3>
<p class="my-4">
"This is a very complex and beautiful set of elements. Under the
hood it comes with the best things from 2 different worlds: Figma
and Tailwind.”
</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img
class="w-9 h-9 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/robert-brown.png"
alt="profile picture"
/>
<div class="space-y-0.5 font-medium dark:text-white">
<div>Robert Brown</div>
<div class="text-sm font-light text-gray-500 dark:text-gray-400">
Junior developer at SAP
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<!-- Block end -->