Social Proof

Evidence others use and trust the product/service.

html

<div class="proof proof--logos">
  <p class="proof__stat">Trusted by 12,000+ teams</p>
  <div class="proof__logos">
    <span>Nimbus</span><span>Fenwick</span><span>Cobalt</span>
  </div>
  <div class="proof__stars" style="color:#E8A020;" aria-label="Rated 4.9 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733; <span>4.9/5</span></div>
</div>
<style>
.proof { font: 15px system-ui, sans-serif; color: #241430; padding: 20px; text-align: center; }
.proof__stat { margin: 0 0 14px; font-weight: 700; font-size: 14px; color: #241430aa; }
.proof__logos { display: flex; gap: 18px; justify-content: center; font-weight: 700; color: #24143066; }
.proof--stars .proof__logos { display: none; }
.proof__stars { display: none; margin-top: 8px; font-size: 16px; letter-spacing: 2px; }
.proof__stars span { font-size: 13px; letter-spacing: 0; color: #241430aa; margin-left: 6px; }
.proof--stars .proof__stars { display: block; }
</style>

tailwind

<div class="proof-tw proof-tw--logos font-sans text-[15px] text-[#241430] p-5 text-center">
  <p class="m-0 mb-3.5 font-bold text-sm text-[#241430]/65">Trusted by 12,000+ teams</p>
  <div class="proof-tw__logos flex gap-4.5 justify-center font-bold text-[#241430]/40">
    <span>Nimbus</span><span>Fenwick</span><span>Cobalt</span>
  </div>
  <div class="proof-tw__stars hidden mt-2 text-base tracking-widest" style="color:#E8A020;" aria-label="Rated 4.9 out of 5">&#9733;&#9733;&#9733;&#9733;&#9733; <span class="text-[13px] tracking-normal text-[#241430]/65 ml-1.5">4.9/5</span></div>
</div>
<style>
.proof-tw--stars .proof-tw__logos { display: none; }
.proof-tw--stars .proof-tw__stars { display: block; }
</style>

react

export function SocialProof({
  statText = "Trusted by 12,000+ teams",
  style = "logos",
  accent = "#E8A020",
  showStat = true,
}) {
  const stars = style === "stars";
  return (
    <div style={{ font: "15px system-ui, sans-serif", color: "#241430", padding: 20, textAlign: "center" }}>
      {showStat && <p style={{ margin: "0 0 14px", fontWeight: 700, fontSize: 14, color: "#241430aa" }}>{statText}</p>}
      {!stars && (
        <div style={{ display: "flex", gap: 18, justifyContent: "center", fontWeight: 700, color: "#24143066" }}>
          <span>Nimbus</span><span>Fenwick</span><span>Cobalt</span>
        </div>
      )}
      {stars && (
        <div aria-label="Rated 4.9 out of 5" style={{ marginTop: 8, fontSize: 16, letterSpacing: 2, color: accent }}>
          &#9733;&#9733;&#9733;&#9733;&#9733; <span style={{ fontSize: 13, letterSpacing: 0, color: "#241430aa", marginLeft: 6 }}>4.9/5</span>
        </div>
      )}
    </div>
  );
}