Home
zobaidul kaziex
Testimonial examples in Tailwind CSS

Testimonial examples in Tailwind CSS

Here are some testimonial section examples using Tailwind CSS:

This tailwind example is contributed by zobaidul kaziex, on 10-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author zobaidul kaziex

1.4k

Fork Fullscreen

<section
  class="bg-purple-800 h-screen bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern.svg')] dark:bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern-dark.svg')]">
  <div class="py-8 px-4 mx-auto text-center lg:py-16 z-10 relative">
    <a href="#"
      class="inline-flex justify-between items-center py-1 px-1 pe-4 mb-7 text-sm text-blue-700 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800">
      <span class="text-xs bg-blue-600 rounded-full text-white px-4 py-1.5 me-3">New</span>
      <span class="text-sm font-medium">New tools are available! Check it out.</span>
      <svg class="w-2.5 h-2.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
        viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
      </svg>
    </a>
    <h1
      class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
      We invest in the world’s potential
    </h1>
    <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-200">
      You will find all the tools you need under one umbrella. Use them as you like for all your mathematical problems.
    </p>
    <div class="w-full max-w-md mx-auto">
      <label for="default-email" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Email sign-up</label>
      <div class="relative">
        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
            fill="currentColor" viewBox="0 0 20 16">
            <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
            <path
              d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
          </svg>
        </div>
        <input
                    type="email"
                    id="default-email"
                    class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-white focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Enter your email here..."
                    required
                />
        <button type="submit" class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    Sign up
                </button>
      </div>
    </div>
  </div>
  <div class="bg-gradient-to-b from-blue-50 to-transparent dark:from-blue-900 h-screen absolute top-0 left-0 z-0"></div>
</section>

Related Examples

Testimonial card with image

Author:
Simon Scheffer

2 years ago

12k
Testimonial card

Author:
Amit Pachange

2 years ago

11.6k
Review Cards
Multiple rounded cards with user names, comments, and star ratings.

Author:
Hyun-woo Cho

2 years ago

8.1k
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

5 months ago

712
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.3k
Landing page

Author:
Maxim

7 months ago

1.6k
User product review card

Author:
Brandon D

2 years ago

14.2k
User review cards
Resposive testemonial cards

Author:
Erik Hyatt

2 years ago

15k
Testimonial Section with Gradient Background
The section includes a company logo at the top, a customer testimonial in the center, and the author's name and position at the bottom.

Author:
Elsabe Fourie

2 years ago

8.1k
Testimonial that What Client Says

Author:
Abdul Baset Bappy

4 months ago

514
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

4 months ago

356
Testimonial for dark theme

Author:
Sophia Baker

2 years ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components