Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Marquee

CSS-only Tailwind CSS marquee for horizontally scrolling content and logos. Speed and direction control via CSS, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Seçim çerçevesi bileşenleri sonsuz, sürekli kayan içerik şeritleri oluşturur; marka logoları, duyuru banner'ları, referanslar veya etiket bulutları için idealdir. Tamamen CSS animasyonlarıyla oluşturulan Frutjam çerçevesi, yatay ve dikey yönleri, fareyle üzerine gelindiğinde duraklatmayı, geri döndürülebilir oynatmayı ve hız kontrolünü destekler. Kesintisiz, boşluksuz bir döngü için marquee-track öğesini (aria-hidden ile) çoğaltın.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
marqueeTemelDış kap — klipler taşar ve animasyon değişkenlerini tutar
marquee-trackDeğiştiriciİç sırayı kaydırarak; Sorunsuz bir döngü için aria-hidden ile kopyalayın
marquee-pauseDeğiştiriciFareyle üzerine gelindiğinde animasyonu duraklatır
marquee-reverseDeğiştiriciTers yönde kaydırır
marquee-verticalDeğiştiriciSoldan sağa kaydırmak yerine yukarıdan aşağıya kaydırma yapar
marquee-slowSpeedYavaş kaydırma (40'lı döngü)
marquee-normalSpeedVarsayılan hız (20 saniyelik döngü)
marquee-fastSpeedHızlı kaydırma (10 saniyelik döngü)
marquee-fadeDeğiştiriciHer iki tarafa da degrade solma kenarları ekler

Temel Kullanım

İki özdeş marquee-track öğesi ekleyin; ikincisi (aria-hidden="true" ile), ilki ekrandan kaydırıldığında boşluğu doldurur.

Item 1 Item 2 Item 3 Item 4 Item 5 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="marquee">
  <div class="marquee-track">
    <span class="badge badge-soft">Item 1</span>
    <span class="badge badge-soft">Item 2</span>
    <span class="badge badge-soft">Item 3</span>
    <span class="badge badge-soft">Item 4</span>
    <span class="badge badge-soft">Item 5</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-soft">Item 1</span>
    <span class="badge badge-soft">Item 2</span>
    <span class="badge badge-soft">Item 3</span>
    <span class="badge badge-soft">Item 4</span>
    <span class="badge badge-soft">Item 5</span>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]

export default function MarqueeDemo() {
  return (
    <div className="marquee">
      <div className="marquee-track">
        {items.map((item) => (
          <span key={item} className="badge badge-soft">{item}</span>
        ))}
      </div>
      <div className="marquee-track" aria-hidden="true">
        {items.map((item) => (
          <span key={item} className="badge badge-soft">{item}</span>
        ))}
      </div>
    </div>
  )
}

Fareyle üzerine gelindiğinde duraklat

Kullanıcı şeridin üzerine geldiğinde animasyonu durdurmak için marquee-pause ekleyin.

Hover me to pause the scroll Animation stops here
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="marquee marquee-pause">
  <div class="marquee-track">
    <span class="badge badge-primary badge-soft">Hover me</span>
    <span class="badge badge-secondary badge-soft">to pause</span>
    <span class="badge badge-accent badge-soft">the scroll</span>
    <span class="badge badge-info badge-soft">Animation</span>
    <span class="badge badge-success badge-soft">stops here</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-primary badge-soft">Hover me</span>
    <span class="badge badge-secondary badge-soft">to pause</span>
    <span class="badge badge-accent badge-soft">the scroll</span>
    <span class="badge badge-info badge-soft">Animation</span>
    <span class="badge badge-success badge-soft">stops here</span>
  </div>
</div>

Ters Yön

Soldan sağa kaydırmak yerine sağdan sola kaydırmak için marquee-reverse komutunu kullanın. Katmanlı bir etki için iki satırı birleştirin.

Alpha Beta Gamma Delta Epsilon
Alpha Beta Gamma Delta Epsilon
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="flex flex-col gap-3">
  <div class="marquee">
    <div class="marquee-track">
      <span class="badge badge-primary">Alpha</span>
      <span class="badge badge-secondary">Beta</span>
      <span class="badge badge-accent">Gamma</span>
      <span class="badge badge-info">Delta</span>
      <span class="badge badge-success">Epsilon</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-primary">Alpha</span>
      <span class="badge badge-secondary">Beta</span>
      <span class="badge badge-accent">Gamma</span>
      <span class="badge badge-info">Delta</span>
      <span class="badge badge-success">Epsilon</span>
    </div>
  </div>
  <div class="marquee marquee-reverse">
    <div class="marquee-track">
      <span class="badge badge-soft badge-primary">Alpha</span>
      <span class="badge badge-soft badge-secondary">Beta</span>
      <span class="badge badge-soft badge-accent">Gamma</span>
      <span class="badge badge-soft badge-info">Delta</span>
      <span class="badge badge-soft badge-success">Epsilon</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-soft badge-primary">Alpha</span>
      <span class="badge badge-soft badge-secondary">Beta</span>
      <span class="badge badge-soft badge-accent">Gamma</span>
      <span class="badge badge-soft badge-info">Delta</span>
      <span class="badge badge-soft badge-success">Epsilon</span>
    </div>
  </div>
</div>

Hız Çeşitleri

Slow Slow Slow Slow Slow
Normal Normal Normal Normal Normal
Fast Fast Fast Fast Fast
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="flex flex-col gap-3">
  <div class="marquee marquee-slow">
    <div class="marquee-track">
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
    </div>
  </div>
  <div class="marquee">
    <div class="marquee-track">
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
    </div>
  </div>
  <div class="marquee marquee-fast">
    <div class="marquee-track">
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
    </div>
  </div>
</div>

Dikey Çerçeve

marquee-vertical ekleyin ve yukarıdan aşağıya kaydırma için kapsayıcıya sabit bir yükseklik verin.

Announcement one
Announcement two
Announcement three
Announcement four
Announcement five
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="marquee marquee-vertical h-48">
  <div class="marquee-track">
    <div class="badge badge-primary badge-soft">Announcement one</div>
    <div class="badge badge-secondary badge-soft">Announcement two</div>
    <div class="badge badge-accent badge-soft">Announcement three</div>
    <div class="badge badge-info badge-soft">Announcement four</div>
    <div class="badge badge-success badge-soft">Announcement five</div>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <div class="badge badge-primary badge-soft">Announcement one</div>
    <div class="badge badge-secondary badge-soft">Announcement two</div>
    <div class="badge badge-accent badge-soft">Announcement three</div>
    <div class="badge badge-info badge-soft">Announcement four</div>
    <div class="badge badge-success badge-soft">Announcement five</div>
  </div>
</div>

Teknoloji Etiketleri

Bir beceri setini veya teknoloji yığınını sergilemek için yaygın bir model.

HTML CSS JavaScript TypeScript React Vue Tailwind CSS Node.js
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="marquee marquee-pause [--marquee--gap:0.75rem] p-2">
  <div class="marquee-track">
    <span class="badge badge-outline">HTML</span>
    <span class="badge badge-outline">CSS</span>
    <span class="badge badge-outline">JavaScript</span>
    <span class="badge badge-outline">TypeScript</span>
    <span class="badge badge-outline">React</span>
    <span class="badge badge-outline">Vue</span>
    <span class="badge badge-outline">Tailwind CSS</span>
    <span class="badge badge-outline">Node.js</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-outline">HTML</span>
    <span class="badge badge-outline">CSS</span>
    <span class="badge badge-outline">JavaScript</span>
    <span class="badge badge-outline">TypeScript</span>
    <span class="badge badge-outline">React</span>
    <span class="badge badge-outline">Vue</span>
    <span class="badge badge-outline">Tailwind CSS</span>
    <span class="badge badge-outline">Node.js</span>
  </div>
</div>

Özel Boşluk

Aralığa ve hıza ince ayar yapmak için --marquee--gap veya --marquee--duration'u satır içi bir yardımcı programla geçersiz kılın.

Wide gap Wide gap Wide gap Wide gap
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="marquee [--marquee--gap:2rem] [--marquee--duration:30s]">
  <div class="marquee-track">
    <span class="badge badge-lg badge-primary">Wide gap</span>
    <span class="badge badge-lg badge-secondary">Wide gap</span>
    <span class="badge badge-lg badge-accent">Wide gap</span>
    <span class="badge badge-lg badge-info">Wide gap</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-lg badge-primary">Wide gap</span>
    <span class="badge badge-lg badge-secondary">Wide gap</span>
    <span class="badge badge-lg badge-accent">Wide gap</span>
    <span class="badge badge-lg badge-info">Wide gap</span>
  </div>
</div>

Kenarları Soldur

Gösterişli bir görünüm elde etmek amacıyla şeridin her iki ucunu da sayfa arka planına geçirmek için marquee-fade ekleyin.

Design Development Performance Accessibility Open Source Security Testing
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="marquee marquee-fade marquee-pause">
  <div class="marquee-track">
    <span class="badge badge-soft badge-primary">Design</span>
    <span class="badge badge-soft badge-secondary">Development</span>
    <span class="badge badge-soft badge-accent">Performance</span>
    <span class="badge badge-soft badge-info">Accessibility</span>
    <span class="badge badge-soft badge-success">Open Source</span>
    <span class="badge badge-soft badge-warning">Security</span>
    <span class="badge badge-soft badge-error">Testing</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-soft badge-primary">Design</span>
    <span class="badge badge-soft badge-secondary">Development</span>
    <span class="badge badge-soft badge-accent">Performance</span>
    <span class="badge badge-soft badge-info">Accessibility</span>
    <span class="badge badge-soft badge-success">Open Source</span>
    <span class="badge badge-soft badge-warning">Security</span>
    <span class="badge badge-soft badge-error">Testing</span>
  </div>
</div>

Duyuru Banner'ı

Promosyonlar veya site genelindeki bildirimler için ince bir şerit çubuğu. En iyi deneyim için marquee-fade ve marquee-pause'u birleştirin.

🎉 Version 2.0 is here — explore what's new 🌿 Built with Tailwind CSS v4 ⚡ Zero JavaScript, pure CSS components 🎨 Fully themeable with CSS variables
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="bg-primary text-on-primary py-2 px-4">
  <div class="marquee marquee-fade marquee-pause [--marquee--duration:30s]">
    <div class="marquee-track text-sm font-medium">
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🎉 Version 2.0 is here — explore what's new</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🌿 Built with Tailwind CSS v4</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">⚡ Zero JavaScript, pure CSS components</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🎨 Fully themeable with CSS variables</span>
    </div>
    <div class="marquee-track text-sm font-medium" aria-hidden="true">
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🎉 Version 2.0 is here — explore what's new</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🌿 Built with Tailwind CSS v4</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">⚡ Zero JavaScript, pure CSS components</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🎨 Fully themeable with CSS variables</span>
    </div>
  </div>
</div>

Logo Çerçevesi

Sürekli kayan bir şeritte iş ortaklarını veya güvenilir markaları sergileyin. Kenarları arka planla karıştırmak için marquee-fade'i kullanın.

Acme
Globex
Initech
Umbrella
Hooli
Pied Piper
Vehement
Massive
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="marquee marquee-fade marquee-pause [--marquee--gap:3rem] [--marquee--duration:25s]">
  <div class="marquee-track items-center">
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Acme</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Globex</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Initech</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Umbrella</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Hooli</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Pied Piper</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Vehement</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Massive</span>
    </div>
  </div>
  <div class="marquee-track items-center" aria-hidden="true">
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Acme</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Globex</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Initech</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Umbrella</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Hooli</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Pied Piper</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Vehement</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Massive</span>
    </div>
  </div>
</div>

Referans Kartları

Okunabilirlik için fareyle üzerine gelindiğinde ince bir duraklama ile referans kartları arasında gezinin.

"Absolutely love the component library. Saves us hours every sprint."

A

Alex Morgan

Frontend Engineer

"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."

J

Jamie Lee

Product Designer

"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."

S

Sam Rivera

Tech Lead

"Great DX, thoughtful defaults, and the dark mode just works out of the box."

R

Riley Chen

Full Stack Developer

html 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
<div class="marquee marquee-fade marquee-pause [--marquee--gap:1rem] [--marquee--duration:40s]">
  <div class="marquee-track items-stretch">
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Absolutely love the component library. Saves us hours every sprint."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-primary">A</div>
          <div>
            <p class="text-sm font-medium">Alex Morgan</p>
            <p class="text-xs text-body">Frontend Engineer</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-secondary">J</div>
          <div>
            <p class="text-sm font-medium">Jamie Lee</p>
            <p class="text-xs text-body">Product Designer</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-accent">S</div>
          <div>
            <p class="text-sm font-medium">Sam Rivera</p>
            <p class="text-xs text-body">Tech Lead</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Great DX, thoughtful defaults, and the dark mode just works out of the box."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-info">R</div>
          <div>
            <p class="text-sm font-medium">Riley Chen</p>
            <p class="text-xs text-body">Full Stack Developer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="marquee-track items-stretch" aria-hidden="true">
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Absolutely love the component library. Saves us hours every sprint."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-primary">A</div>
          <div>
            <p class="text-sm font-medium">Alex Morgan</p>
            <p class="text-xs text-body">Frontend Engineer</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-secondary">J</div>
          <div>
            <p class="text-sm font-medium">Jamie Lee</p>
            <p class="text-xs text-body">Product Designer</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-accent">S</div>
          <div>
            <p class="text-sm font-medium">Sam Rivera</p>
            <p class="text-xs text-body">Tech Lead</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Great DX, thoughtful defaults, and the dark mode just works out of the box."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-info">R</div>
          <div>
            <p class="text-sm font-medium">Riley Chen</p>
            <p class="text-xs text-body">Full Stack Developer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>