New
Social MediaSocial Links Bar
A wrapping row of icon-only social links, each an inline SVG with an accessible name.
#social#links#icons
3 frameworksBeginner
Loading…
An as-seen-on wordmark row paired with follower counts for instant social proof.
<!--
Two proofs in one strip: a wrapping row of wordmarks ("as seen on") and a row
of follower counts. The wordmarks are muted text rather than <img> so nothing
ever ships a broken logo; swap them for inline SVG once you have brand assets.
Every follower figure is icon + number, so it survives greyscale.
-->
<section class="w-full max-w-3xl">
<p class="text-center text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-400">As seen on</p>
<div class="mt-3 flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
<span class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">TechDaily</span>
<span class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">Wireframe</span>
<span class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">The Verge</span>
<span class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">Product Hunt</span>
</div>
<div class="mt-6 flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
<span class="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
<svg viewBox="0 0 24 24" class="h-5 w-5 shrink-0" fill="currentColor" aria-hidden="true"><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>
<span><strong class="font-bold text-gray-900 dark:text-gray-100">48K</strong> followers on X</span>
</span>
<span class="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
<svg viewBox="0 0 24 24" class="h-5 w-5 shrink-0" fill="currentColor" aria-hidden="true"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
<span><strong class="font-bold text-gray-900 dark:text-gray-100">120K</strong> subscribers</span>
</span>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
proofLabel | string | 'As seen on' | Proof label |
logos | string[] | - | Logos |
followers | FollowerStat[] | - | Followers |
className | string | - | Additional classes merged onto the root element. |
Two proofs in one strip: `logos` render as muted wordmarks so nothing ships a broken `<img>`, and `followers` render as icon-plus-count figures. Both rows wrap and centre at any width. Swap the wordmarks for inline SVG once you have brand assets.