注目新着
お客様の声Three-Column Testimonial Grid
A responsive grid of quote cards that stacks to one column on mobile.
#testimonials#grid#quotes
3 個のフレームワーク初級
Loading…
A compact stack of overlapping avatars over a rating, count and one-line quote.
<section class="mx-auto w-full max-w-xl px-4 py-10 text-center sm:px-6">
<!-- Overlapping avatars: an unordered list of initials; the ring makes the
stack legible where circles overlap on both themes. -->
<ul class="flex justify-center -space-x-3">
<li class="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-violet-500 text-xs font-semibold text-white ring-2 ring-white dark:ring-gray-950">AO</li>
<li class="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 text-xs font-semibold text-white ring-2 ring-white dark:ring-gray-950">DR</li>
<li class="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-amber-500 to-orange-500 text-xs font-semibold text-white ring-2 ring-white dark:ring-gray-950">PN</li>
<li class="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-pink-500 to-rose-500 text-xs font-semibold text-white ring-2 ring-white dark:ring-gray-950">SB</li>
<li class="flex h-11 w-11 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold text-gray-700 ring-2 ring-white dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-950">+9</li>
</ul>
<div class="mt-4 flex items-center justify-center gap-0.5" role="img" aria-label="Rated 5 out of 5">
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
</div>
<p class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">Loved by 2,000+ teams</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">“The one tool nobody on the team wants to give up.”</p>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
names | string[] | - | Names |
rating | number | 5 | 0 から 5 までの星評価。 |
label | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
quote | string | - | 推薦文のテキスト。前後の引用符は含めません。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Colour is decorative - the initials carry identity and the `+N` overflow tile is a gray neutral so it never reads as another person. The ring keeps overlapping circles legible on both themes; extra names collapse into the count automatically.