Create a Responsive Testimonials Accordion with Quotes in Tailwind CSS

Last Updated : 08 Mar, 2024

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.

djfghj

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
          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=
"https://media.geeksforgeeks.org/wp-content/uploads/20240304201046/geeksforgeeks-(1).png"
                        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=
"https://media.geeksforgeeks.org/wp-content/uploads/20240304201046/geeksforgeeks-(1).png"
                        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=
"https://media.geeksforgeeks.org/wp-content/uploads/20240304201046/geeksforgeeks-(1).png"
                        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=
"https://media.geeksforgeeks.org/wp-content/uploads/20240304201046/geeksforgeeks-(1).png"
                        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=
"https://media.geeksforgeeks.org/wp-content/uploads/20240304201046/geeksforgeeks-(1).png"
                        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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.min.js" defer>
      </script>
</body>

</html>