Design a Testimonial Page using Tailwind CSS
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
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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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"> w3wiki 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 w3wiki. Really loved the breadth of concepts and topics available on this site. Great work guys!! Thank you w3wiki 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 w3wiki </ 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: