<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
link
href
=
rel
=
"stylesheet"
>
<
title
>Testimonials Accordion</
title
>
</
head
>
<
body
class="bg-gradient-to-b from-red-500
via-yellow-500 to-purple-500
min-h-screen flex items-center
justify-center">
<
div
class
=
"max-w-md w-full"
style
=
"border-radius: 20px;"
>
<
div
class="card-container p-4 shadow-md
rounded-md text-center"
style
=
"background-color: rgb(247, 239, 239);"
>
<
h1
class
=
"gfg text-4xl font-bold text-green-800 mb-10"
>
GeeksforGeeks
</
h1
>
<
div
x-data
=
"{ openTab: 1 }"
>
<
div
x-show
=
"openTab === 1"
class
=
"mb-4"
>
<
img
src
=
alt
=
"Client 1"
class
=
"rounded-full mx-auto mb-4 w-32 border-2 border-gray-500"
>
<
h1
class
=
"text-2xl text-black font-semibold mb-4"
>
Geeks One
</
h1
>
<
blockquote
class="text-gray-800 italic border-l-4
border-red-500 pl-4">
GeeksforGeeks is not just a website; it's a sanctuary
for the curious minds, a virtual haven
where geeks embrace the art of problem-solving
and code crafting
</
blockquote
>
</
div
>
<
div
x-show
=
"openTab === 2"
class
=
"mb-4"
>
<
img
src
=
alt
=
"Client 2"
class
=
"rounded-full mx-auto mb-4 w-32 border-2 border-gray-500"
>
<
h1
class
=
"text-2xl text-black font-semibold mb-4"
>
Geeks Two
</
h1
>
<
blockquote
class="text-gray-800 italic border-l-4
border-yellow-500 pl-4">
In the vast realm of coding knowledge,
GeeksforGeeks is the compass
that guides geeks through
the intricate maze of algorithms and
data structures.
</
blockquote
>
</
div
>
<
div
x-show
=
"openTab === 3"
class
=
"mb-4"
>
<
img
src
=
alt
=
"Client 2"
class="rounded-full mx-auto mb-4 w-32 border-2
border-gray-500">
<
h1
class
=
"text-2xl text-black font-semibold mb-4"
>
Geeks Three
</
h1
>
<
blockquote
class="text-gray-800 italic border-l-4
border-green-500 pl-4">
GeeksforGeeks: Where passion meets code,
and algorithms become the
poetry of the digital age
</
blockquote
>
</
div
>
<
div
x-show
=
"openTab === 4"
class
=
"mb-4"
>
<
img
src
=
alt
=
"Client 2"
class="rounded-full mx-auto mb-4 w-32 border-2
border-gray-500">
<
h1
class
=
"text-2xl text-black font-semibold mb-4"
>
Geeks Four
</
h1
>
<
blockquote
class="text-gray-800 italic border-l-4
border-blue-500 pl-4">
GeeksforGeeks, where code meets curiosity,
unlocking the world
of endless possibilities in
computer science and programming
</
blockquote
>
</
div
>
<
div
x-show
=
"openTab === 5"
class
=
"mb-4"
>
<
img
src
=
alt
=
"Client 2"
class="rounded-full mx-auto mb-4 w-32 border-2
border-gray-500">
<
h1
class
=
"text-2xl text-black font-semibold mb-4"
>
Geeks Five</
h1
>
<
blockquote
class="text-gray-800 italic border-l-4
border-purple-500 pl-4">
In the binary world of ones and zeros, GeeksforGeeks
stands as the ultimate encyclopedia,
unraveling the secrets of programming with every click
</
blockquote
>
</
div
>
<
hr
class
=
"my-6"
>
<
div
class
=
"grid grid-cols-2 gap-8 mb-3"
>
<
button
@
click
=
"openTab = Math.max(openTab - 1, 1)"
class="text-1xl py-2 px-3 rounded-md bg-red-800
text-white hover:bg-green-600
font-bold focus:outline-none
focus:shadow-outline-blue mb-2">
Previous
</
button
>
<
button
@
click
=
"openTab = Math.min(openTab + 1, 5)"
class="text-1xl py-2 px-3 rounded-md
bg-red-800 text-white hover:bg-green-600
font-bold focus:outline-none
focus:shadow-outline-blue mb-2">
Next
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
</
script
>
</
body
>
</
html
>