showcase

Testimonial Card

A single testimonial card with quote, avatar, and rating stars.

testimonial card review | Claude 4.6 Sonnet

Prompt 

# Role
You are a Creative Frontend Developer specializing in testimonial displays, social proof components, and typography-driven design.

# Objective
Build a polished testimonial card component with quote text, customer info, avatar, and star rating — suitable for landing pages and product showcases.

# Instructions
1. Create the card container:
   - Elevated card with subtle shadow and rounded corners
   - Clean, modern aesthetic with generous padding
   - Optional: accent border or gradient background
2. Add quote content:
   - Large, readable quote text (italicized)
   - Opening quotation mark decoration (large, accent-colored)
   - Support for 2–4 lines of text
3. Include customer info:
   - Avatar image (circular, 48–64px)
   - Customer name (bold)
   - Job title or company (muted, smaller text)
   - Optional: small social icon (Twitter, LinkedIn)
4. Add star rating:
   - 5-star display using filled/empty star icons
   - Gold or accent color for filled stars
   - Support displaying 3–5 stars
5. Style with Tailwind CSS in dark mode:
   - Card background slightly lighter than page
   - Subtle border or shadow for depth
   - Consistent typography scale

# Constraints
- Semantic HTML with proper `<blockquote>` and `<figure>` elements
- Add `loading="lazy"` on avatar image
- Tailwind CSS only — no custom CSS
- Use placeholder image via `pravatar.cc` or similar
- Responsive: card adapts to container width

# Output Format
- Single HTML file using Tailwind CSS CDN
- Include a 5-star rating and realistic testimonial content
- Well-structured markup with clear sections

Notes

Prompt

Role

You are a Creative Frontend Developer specializing in testimonial displays, social proof components, and typography-driven design.

Objective

Build a polished testimonial card component with quote text, customer info, avatar, and star rating — suitable for landing pages and product showcases.

Instructions

  1. Create the card container:
    • Elevated card with subtle shadow and rounded corners
    • Clean, modern aesthetic with generous padding
    • Optional: accent border or gradient background
  2. Add quote content:
    • Large, readable quote text (italicized)
    • Opening quotation mark decoration (large, accent-colored)
    • Support for 2–4 lines of text
  3. Include customer info:
    • Avatar image (circular, 48–64px)
    • Customer name (bold)
    • Job title or company (muted, smaller text)
    • Optional: small social icon (Twitter, LinkedIn)
  4. Add star rating:
    • 5-star display using filled/empty star icons
    • Gold or accent color for filled stars
    • Support displaying 3–5 stars
  5. Style with Tailwind CSS in dark mode:
    • Card background slightly lighter than page
    • Subtle border or shadow for depth
    • Consistent typography scale

Constraints

  • Semantic HTML with proper <blockquote> and <figure> elements
  • Add loading="lazy" on avatar image
  • Tailwind CSS only — no custom CSS
  • Use placeholder image via pravatar.cc or similar
  • Responsive: card adapts to container width

Output Format

  • Single HTML file using Tailwind CSS CDN
  • Include a 5-star rating and realistic testimonial content
  • Well-structured markup with clear sections

Notes

  • Testimonial cards build trust — make the quote prominent and the customer info clear.
  • Use <blockquote> for the quote and <figure> for the customer info to maintain semantic meaning.
  • Perfect for product pages, SaaS landing pages, and client showcase sections.

Related Prompts

View prompt details

Testimonial Carousel

Auto-scrolling customer testimonial slider.

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in social proof components, CSS scroll mechanics, and lightweight interactive UI. # Objective Create an auto-scrolling testimonial carousel using CSS scroll-snap for smooth, native-feeling slide transitions — with minimal JavaScript for auto-advance and pause-on-hover functionality. # Instructions 1. Build the carousel container: - Horizontal scroll container with `scroll-snap-type: x mandatory` - Hide scrollbar using `::-webkit-scrollbar` and `scrollbar-width: none` - Show exactly 1 testimonial at a time (full-width slides) 2. Create each testimonial slide: - Large quote text (in quotation marks or with a quote icon) - Author section below the quote: - Avatar (circular, 48px) - Author name (bold) - Role and company (muted text) - Each slide snaps with `scroll-snap-align: center` 3. Add navigation dots: - Horizontal row of dots below the carousel - Active dot: filled accent color, slightly larger - Inactive dots: muted outline or smaller - Clicking a dot scrolls to the corresponding slide 4. Implement auto-advance behavior: - Auto-scroll to the next slide every 5 seconds - Pause auto-advance on hover - Resume auto-advance when mouse leaves - Loop back to the first slide after the last 5. Style in dark mode: - Dark background for the carousel section - Quote text in light color, author details in muted tones - Subtle card or section background to frame each testimonial # Constraints - CSS-first approach: use `scroll-snap` for sliding — not JavaScript-based transforms - Minimal JavaScript: only for auto-advance timer and dot click handlers - No external dependencies or frameworks - Show exactly 1 testimonial at a time for maximum focus - Include 4–5 testimonial slides with realistic placeholder content - Accessible: `aria-label` on the carousel, `role="tablist"` on dots # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 4–5 realistic testimonials (SaaS or tech product theme) - Well-commented code with clear sections for layout, animation, and interaction

testimonial carousel social-proof +1
Gemini 3.1 Pro