This article demonstrates creating a Responsive Testimonials Accordion with Quotes in Tailwind CSS. After linking Tailwind CSS to the HTML file, the Testimonials Accordion with Quotes is structured and styled using Tailwind’s classes. Users interact with the Testimonials Accordion with Quotes by clicking the previous and next buttons.
Approach:
- First, we make a folder where we put an HTML file. In the HTML file, we include a link to integrate Tailwind CSS.
- Now use Tailwind CSS classes to style the Quiz form. We add five Testimonials Accordion with Quotes and make them visually appealing to the reader, using the next and previous button we can move to previous and next Testimonials Accordion with Quotes.
- By following these steps, we create a Testimonials Accordion with Quotes for users, where they see their results based on their Testimonials Accordion with Quotes by clicking previous and next buttons.
Example: The below code example implements Create a Responsive Testimonials Accordion with Quotes in Tailwind CSS.
HTML
<!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);" >
<!-- Centered GeeksforGeeks Heading -->
< h1 class = "gfg text-4xl font-bold text-green-800 mb-10" >
GeeksforGeeks
</ h1 >
< div x-data = "{ openTab: 1 }" >
<!-- Testimonial Tabs -->
< div x-show = "openTab === 1" class = "mb-4" >
<!-- Testimonial Content -->
< 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 >
<!-- Navigation Buttons -->
< 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 >
|
Output: