social-proof tweets twitter x masonry testimonials user-generated authentic tweets social-proof twitter x masonry testimonials ugc user-generated tweet wall social proof section twitter testimonials grid user posts masonry layout
Tweet Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/social-proof/tweet-grid.json tweet-grid.html
<section class="ws-social-proof bg-[var(--ws-social-proof-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-social-proof-accent)]">Social proof</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-social-proof-text)] sm:text-4xl">What people are saying</h2>
</div>
<div class="mt-16 columns-1 gap-6 sm:columns-2 lg:columns-3">
<!-- Tweet card 1 -->
<article class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-social-proof-border)] bg-[var(--ws-social-proof-card-bg)] p-6">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-violet-400 to-purple-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-social-proof-text)]">Sarah Chen</p>
<p class="text-xs text-[var(--ws-social-proof-text-muted)]">@sarahbuilds</p>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-social-proof-text-muted)]" fill="currentColor" viewBox="0 0 24 24" aria-label="X (Twitter)"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-social-proof-text)]">Just shipped our new dashboard in half the time because of @webspire. Copied the bento grid, tweaked the tokens, done. This is how UI libraries should work.</p>
<p class="mt-4 text-xs text-[var(--ws-social-proof-text-muted)]">March 22, 2026</p>
</article>
<!-- Tweet card 2 -->
<article class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-social-proof-border)] bg-[var(--ws-social-proof-card-bg)] p-6">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-sky-400 to-blue-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-social-proof-text)]">Marcus Novak</p>
<p class="text-xs text-[var(--ws-social-proof-text-muted)]">@marcusdev</p>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-social-proof-text-muted)]" fill="currentColor" viewBox="0 0 24 24" aria-label="X (Twitter)"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-social-proof-text)]">The dark mode token system is so clean. No `dark:` classes everywhere, just one CSS file and it just works. Finally a library that made a real architectural decision.</p>
<p class="mt-4 text-xs text-[var(--ws-social-proof-text-muted)]">March 19, 2026</p>
</article>
<!-- Tweet card 3 -->
<article class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-social-proof-border)] bg-[var(--ws-social-proof-card-bg)] p-6">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-social-proof-text)]">Priya Sharma</p>
<p class="text-xs text-[var(--ws-social-proof-text-muted)]">@priyaships</p>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-social-proof-text-muted)]" fill="currentColor" viewBox="0 0 24 24" aria-label="X (Twitter)"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-social-proof-text)]">Tried 4 other Tailwind component libraries before landing here. The pattern quality is genuinely different — semantic HTML, real accessibility, and it looks beautiful out of the box.</p>
<p class="mt-4 text-xs text-[var(--ws-social-proof-text-muted)]">March 17, 2026</p>
</article>
<!-- Tweet card 4 -->
<article class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-social-proof-border)] bg-[var(--ws-social-proof-card-bg)] p-6">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-amber-400 to-orange-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-social-proof-text)]">Tom Erikson</p>
<p class="text-xs text-[var(--ws-social-proof-text-muted)]">@tomstartup</p>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-social-proof-text-muted)]" fill="currentColor" viewBox="0 0 24 24" aria-label="X (Twitter)"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-social-proof-text)]">Our landing page redesign: before = 3 weeks. After finding Webspire = 3 days. The MCP integration is a game changer for working with AI assistants on the frontend.</p>
<p class="mt-4 text-xs text-[var(--ws-social-proof-text-muted)]">March 14, 2026</p>
</article>
<!-- Tweet card 5 -->
<article class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-social-proof-border)] bg-[var(--ws-social-proof-card-bg)] p-6">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-pink-400 to-rose-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-social-proof-text)]">Lena Bauer</p>
<p class="text-xs text-[var(--ws-social-proof-text-muted)]">@lenacodes</p>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-social-proof-text-muted)]" fill="currentColor" viewBox="0 0 24 24" aria-label="X (Twitter)"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-social-proof-text)]">The hero patterns alone are worth it. I've stopped designing from scratch. Pick a base, swap the copy, push. Every single one is responsive and accessible without me doing anything.</p>
<p class="mt-4 text-xs text-[var(--ws-social-proof-text-muted)]">March 11, 2026</p>
</article>
<!-- Tweet card 6 -->
<article class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-social-proof-border)] bg-[var(--ws-social-proof-card-bg)] p-6">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-indigo-400 to-violet-500"></div>
<div>
<p class="text-sm font-semibold text-[var(--ws-social-proof-text)]">Diego Reyes</p>
<p class="text-xs text-[var(--ws-social-proof-text-muted)]">@diegobuilds</p>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-[var(--ws-social-proof-text-muted)]" fill="currentColor" viewBox="0 0 24 24" aria-label="X (Twitter)"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</div>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-social-proof-text)]">Not just patterns — it's structured knowledge. Asked my AI agent to compose a SaaS landing page using Webspire MCP. Got a full HTML page in 30 seconds. Legitimately impressive.</p>
<p class="mt-4 text-xs text-[var(--ws-social-proof-text-muted)]">March 8, 2026</p>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
social-prooftweetstwitterxmasonrytestimonialsuser-generatedauthentic
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and eyebrow text. |
| tweets | Yes | Tweet cards with avatar, handle, text, and date. |
Six tweet-style testimonial cards arranged in a CSS masonry grid (3 columns on large screens). Each card shows a user avatar, name, handle, the tweet text, and date — with an X/Twitter logo in the top right. Uses CSS columns for masonry layout with no JavaScript required.