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.2k

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

Author:
Leon Bachmann

2 years ago

9.3k
Testimonial slide gradient

Author:
Freja Jensen

2 years ago

10.2k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

1 week ago

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

Author:
Komal Jain

1 year ago

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

Author:
Abdul Jabbar Al Nahid

1 month ago

138
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

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

Author:
Akshay

2 years ago

12.1k
Modern page
hero page by salvator

Author:
Baraka Salvator

2 months ago

563
basichtml
this is basic html

Author:
Anonymous

1 month ago

116
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.4k
User product review card

Author:
Brandon D

2 years ago

13.9k
Skyhaven International
This is a responsive, modern airport website built with Tailwind CSS (a utility-first CSS framework) and Font Awesome for icons. It includes key sections that an airport website would typically have, such as flight information, services, parking, terminal maps, and contact details

Author:
INGRIDE MUZIRANENGE

2 months ago

266

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components