Home
Quentin Rivers
Testimonial Card with Gradient Background

Testimonial Card with Gradient Background

Forked from> @quentin/testimonial-card-6

This tailwind example is contributed by Quentin Rivers, on 08-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

Author Quentin Rivers

Fork Fullscreen

<div class="max-w-md mx-auto">
  <div
    class="relative overflow-hidden bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl shadow-2xl p-8 text-white">
    <div class="absolute top-0 left-0 w-full h-full bg-white opacity-10 transform -skew-x-12"></div>
    <div class="relative z-10">
      <svg class="w-12 h-12 mb-4 text-purple-300" fill="currentColor" viewBox="0 0 24 24">
        <path
          d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
      </svg>
      <p class="text-xl font-medium mb-4">
        "This product exceeded all my expectations. It's intuitive, powerful, and has dramatically improved my workflow.
        I can't imagine working without it now!"</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/women/91.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-purple-300">
        <div>
          <h4 class="font-semibold">Sarah Johnson</h4>
          <p class="text-purple-200">UX Designer</p>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

User Review Card
With the like/dislike button, start raking and share button

Author:
Akshay

3 years ago

12.6k
Testimonial - Htmlwind
Single centered testimonial

Author:
Htmlwind

9 months ago

1.1k
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

1.7k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

5 months ago

591
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.5k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

9 months ago

1.1k
Testimonial card with image

Author:
Simon Scheffer

3 years ago

12.3k
Testimonial cards
each card contains a customer quote, an image of the customer, and their name.

Author:
Komal Jain

2 years ago

10.9k
Twitter testimonial card

Author:
wtfbrh

1 year ago

1.8k
The future ai
The is technology

Author:
ORGIN_DREAMS

9 months ago

890
Testimonial Card with stars ratings

Author:
Quentin Rivers

1 year ago

2k
Testimonial Card with Floating Image and Star Rating
A beautifully designed testimonial card featuring a floating user image, review text, and a 5-star rating. The card uses a rounded layout with a bright yellow border, making it stand out on any page. Ideal for displaying customer feedback or product reviews with a modern look.

Author:
Anum Shahana

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components