profiles community ambassador colorful glow grid team ambassador community colorful glow profile grid team members ambassador profile grid colorful community member cards team grid with glow shadows community showcase with colored cards
Profiles Colorful Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/profiles/colorful-grid.json colorful-grid.html
<div class="ws-profiles bg-[var(--ws-profiles-bg)] py-16 px-6">
<div class="mx-auto max-w-7xl">
<div class="text-center">
<h2 class="text-2xl font-bold text-[var(--ws-profiles-text)] sm:text-3xl">Meet the community</h2>
<p class="mt-3 text-sm text-[var(--ws-profiles-text-soft)]">Builders, researchers, and creators from around the world.</p>
</div>
<!-- Colorful grid — each card has an individual background color + matching glow -->
<div class="mt-12 flex flex-wrap justify-center gap-3">
<!-- Card: Indigo -->
<a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background-color: oklch(0.55 0.22 264); box-shadow: 0 8px 24px oklch(0.55 0.22 264 / 0.45);">
<div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
<div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">AK</div>
</div>
<p class="mt-2.5 text-xs font-semibold text-white">Alex K.</p>
<p class="text-[10px] text-white/70">Berlin</p>
</a>
<!-- Card: Pink -->
<a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background-color: oklch(0.6 0.22 340); box-shadow: 0 8px 24px oklch(0.6 0.22 340 / 0.45);">
<div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
<div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">SM</div>
</div>
<p class="mt-2.5 text-xs font-semibold text-white">Sara M.</p>
<p class="text-[10px] text-white/70">Paris</p>
</a>
<!-- Card: Orange -->
<a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background-color: oklch(0.68 0.19 50); box-shadow: 0 8px 24px oklch(0.68 0.19 50 / 0.45);">
<div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
<div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">RB</div>
</div>
<p class="mt-2.5 text-xs font-semibold text-white">Robin B.</p>
<p class="text-[10px] text-white/70">London</p>
</a>
<!-- Card: Emerald -->
<a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background-color: oklch(0.62 0.17 162); box-shadow: 0 8px 24px oklch(0.62 0.17 162 / 0.45);">
<div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
<div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">YL</div>
</div>
<p class="mt-2.5 text-xs font-semibold text-white">Yuki L.</p>
<p class="text-[10px] text-white/70">Tokyo</p>
</a>
<!-- Card: Yellow -->
<a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background-color: oklch(0.77 0.17 90); box-shadow: 0 8px 24px oklch(0.77 0.17 90 / 0.45);">
<div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
<div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">PM</div>
</div>
<p class="mt-2.5 text-xs font-semibold text-white">Priya M.</p>
<p class="text-[10px] text-white/70">Mumbai</p>
</a>
<!-- Card: Sky -->
<a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background-color: oklch(0.62 0.18 220); box-shadow: 0 8px 24px oklch(0.62 0.18 220 / 0.45);">
<div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
<div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">CW</div>
</div>
<p class="mt-2.5 text-xs font-semibold text-white">Chris W.</p>
<p class="text-[10px] text-white/70">NYC</p>
</a>
<!-- Card: Red -->
<a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background-color: oklch(0.58 0.22 25); box-shadow: 0 8px 24px oklch(0.58 0.22 25 / 0.45);">
<div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
<div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">FO</div>
</div>
<p class="mt-2.5 text-xs font-semibold text-white">Fatima O.</p>
<p class="text-[10px] text-white/70">Lagos</p>
</a>
<!-- Card: Purple -->
<a href="#" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background-color: oklch(0.55 0.2 300); box-shadow: 0 8px 24px oklch(0.55 0.2 300 / 0.45);">
<div class="h-14 w-14 overflow-hidden rounded-full bg-white/20 ring-2 ring-white/30">
<div class="flex h-full w-full items-center justify-center text-lg font-bold text-white">DN</div>
</div>
<p class="mt-2.5 text-xs font-semibold text-white">Diego N.</p>
<p class="text-[10px] text-white/70">São Paulo</p>
</a>
<!-- Card: "You?" — rainbow gradient, application CTA -->
<a href="#apply" class="group relative flex w-28 flex-col items-center rounded-xl p-4 text-center transition-transform hover:-translate-y-1"
style="background: conic-gradient(from 0deg, oklch(0.6 0.22 340), oklch(0.68 0.19 50), oklch(0.77 0.17 90), oklch(0.62 0.17 162), oklch(0.62 0.18 220), oklch(0.55 0.22 264), oklch(0.55 0.2 300), oklch(0.6 0.22 340)); box-shadow: 0 8px 24px rgba(0,0,0,0.25);"> <!-- ws-ok: decorative rainbow gradient with rgba shadow — intentional -->
<div class="h-14 w-14 rounded-full bg-white/20 ring-2 ring-white/40 flex items-center justify-center">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
</div>
<p class="mt-2.5 text-xs font-bold text-white">You?</p>
<p class="text-[10px] text-white/80">Apply now</p>
</a>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
profilescommunityambassadorcolorfulglowgridteam
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| cards | Yes | Profile cards with avatar, name, and location — each with an individual background color and glow. |
| cta-card | No | Special "You?" card with rainbow gradient to drive applications. |
Ambassador/community profile grid where each card carries its own background color with a matching box-shadow glow. Cards are compact (w-28) and wrap freely — add as many as needed. Includes a special rainbow “You?” card at the end to invite applications. Colors use OKLCH for perceptual consistency of the glow effect. Hover lifts the card with -translate-y-1.