Open In App

Design a Testimonial Page using Tailwind CSS

Last Updated : 24 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Testimonials are written recommendations from users and are often displayed in a separate section of a web page. Generally, a testimonial contains the user’s name, picture, identity (optional), and most importantly, their quoted text.

Preview

Screenshot-2024-01-23-130427

CDN Link

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

Approach

  • Integrate Tailwind CSS into your project using a CDN or set up a build process with npm/yarn. Then, Inside the container element, create individual testimonial cards. Each card should contain an image, testimonial text, and the person’s name and designation.
  • Utilize Tailwind CSS classes to style the overall container, individual testimonial cards, and elements within the cards. This includes image styling, text formatting, and margin/padding adjustments.
  • Apply Tailwind CSS classes like text-lg, font-bold, and color classes to make the names larger, bold, and add color.
  • Apply Tailwind CSS classes for text size and color to make the designation noticeable.
  • Ensure a consistent layout and styling across all testimonial cards and use consistent spacing, margins, and padding for a cohesive design.

Example: Implementation to design the Testimonial Page using 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>
          Tailwind CSS Testimonials Template
      </title>
</head>
  
<body class="bg-gray-100">
  
    <div class="mx-auto my-8 text-center container">
        <h1 class="text-3xl font-semibold 
                   mb-4 text-green-500">
            GeeksforGeeks Testimonials
        </h1>
  
        <div class="flex justify-center">
            <div class="max-w-md mx-4 bg-white 
                        overflow-hidden shadow-lg">
                <img class="h-32 object-cover mx-auto" 
                     src="man-modified.png" 
                     alt="Person 1">
                <div class="p-4">
                    <p class="text-gray-800 leading-relaxed">
                        Hello, I have been practicing questions
                        on this site for the last 2 years and
                        recently I got placed at GeeksforGeeks.
                        Really loved the breadth of concepts
                        and topics available on this site.
                        Great work guys!! Thank you GeeksforGeeks
                        for giving such an awesome platform
                        to prepare for interviews.
                    </p>
                    <p class="mt-2 text-lg font-bold text-blue-600">
                        Pankaj Gupta
                    </p>
                    <p class="text-sm text-gray-500">
                          TCE at GeeksforGeeks
                      </p>
                </div>
            </div>
  
            <!-- Testimonial Card 2 -->
            <div class="max-w-md mx-4 bg-white shadow-lg">
                <img class="h-32 object-cover mx-auto" 
                     src="woman.png"
                     alt="Person 3">
                <div class="p-4">
                    <p class="text-gray-800 leading-relaxed">
                        First of all, I want to thank you
                        for the immense help that
                        you guys were in my placement preparation.
                        I was selected for GS and Cap One in campus
                        placements at IIT Kanpur and a large part
                        of that is because of invaluable 
                        resources hosted at your website. 
                        I can’t describe to you in words,
                        how grateful I am for all these resources.
                    </p>
                    <p class="mt-2 text-lg font-bold text-red-600">
                        Shakshi Singhaniya
                    </p>
                    <p class="text-sm text-gray-500">Manager at Google</p>
                </div>
            </div>
  
            <!-- Testimonial Card 3 -->
            <div class="max-w-md mx-4 bg-white 
                        rounded-lg overflow-hidden shadow-lg">
                <img class="h-32 object-cover mx-auto" 
                     src="man1.png" 
                     alt="Person 2">
                <div class="p-4">
                    <p class="text-gray-800 leading-relaxed">
                        "I am Siddharth Rajpal, a 2014 passout
                        from NSIT and I used to visit your website
                        to prepare for job interviews and once I
                        was ready I started applying to
                        various companies. I got recruited at Google,
                        Amazon, Reliance Jio, Cadence, Mentor Graphics,
                        Delhivery and Octro and all thanks to your website
                        I am living a dream I once had.
                    </p>
                    <p class="mt-2 text-lg font-bold text-purple-600">
                          Raj Malhotra
                      </p>
                    <p class="text-sm text-gray-500">
                       Co-founder at Aviator Tech
                   </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Screenshot-2024-01-23-130427



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads