One large centered testimonial
Create a featured testimonial with Tailwind CSS: a centered large-text quote (text-2xl), a five-star row above it, and a name/role/company line with a small avatar below. Keep it minimal on a light background with lots of whitespace.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create a featured testimonial with Tailwind CSS: a centered large-text quote (text-2xl), a five-star row above it, and a name/role/company line with a small avatar below. Keep it minimal on a light background with lots of whitespace.<section class="mx-auto max-w-3xl px-6 py-20 text-center">
<div class="mb-6 text-lg text-amber-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg></div>
<blockquote class="text-2xl font-medium leading-snug text-neutral-900">
"It replaced four separate tools for us. The team is faster, happier, and we finally have one source of truth."
</blockquote>
<div class="mt-8 flex items-center justify-center gap-3">
<span class="h-11 w-11 rounded-full bg-neutral-200"></span>
<div class="text-left">
<p class="text-sm font-medium text-neutral-900">Jordan Reyes</p>
<p class="text-xs text-neutral-500">VP Operations, Meridian</p>
</div>
</div>
</section>