Home
Coastal UI
Modern Testimonial

Modern Testimonial

A simple and easy to use component for reviews and testimonials.

This tailwind example is contributed by Coastal UI, on 22-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us,endorsement,review,Vote,Front page

Feature showcase Testimonial Comment Section Other Rating Landing Page

Author Coastal UI

534

Fork Fullscreen

<div class="bg-[#0a0a0a] border border-[#222222] rounded-lg w-[260px] relative pb-4 mt-10">
    <div class="before:content-[''] before:absolute before:inset 
                before:border-t-1 before:border-l-1 before:border-r-1 
                before:border-[#222222] before:rounded-t-full 
                before:w-full before:h-1/2 before:top-0
                bg-[#0a0a0a] relative rounded-full -top-10 left-2 w-20 h-20 -mb-6
                flex items-center justify-center overflow-hidden">
        <img src="https://avatars.githubusercontent.com/u/15827433?v=4" class="rounded-full h-16 w-16" />
    </div>
    <div class="absolute top-3 right-3 flex gap-0.5">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
            <path fill="#d0d0d0" d="m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
            <path fill="#d0d0d0" d="m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
            <path fill="#d0d0d0" d="m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z" />
        </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
            <path fill="#d0d0d0" d="m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z" />
        </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
            <path fill="#d0d0d0" d="m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z" />
        </svg>
    </div>
    <div class="text-base text-white font-light px-4">
        Using Coastal UI has been wonderful. My project looks great!
    </div>
    <div class="flex justify-between w-full px-4 text-sm mt-5">
        <div class="text-zinc-400">Samuel Altrov</div>
        <div class="text-zinc-700 text-xs">Student</div>
    </div>
</div>

Related Examples

Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

11.5k
interactive testimonial with Tailwind CSS and Alpine.js

Author:
Michael Andreuzza

1 year ago

2k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

10 months ago

2.2k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

7 months ago

1.1k
Services

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

5 months ago

1.3k
Moving Background Animation

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

4 months ago

1.6k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

3 months ago

845
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

3 months ago

568
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

2 months ago

511
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

2 months ago

726
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

2 months ago

674
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

1 month ago

129

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components