Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Festzelt

Zuletzt aktualisiert:

Nur CSS-CSS-Markenzeichen von Tailwind zum horizontalen Scrollen von Inhalten und Logos. Geschwindigkeits- und Richtungssteuerung über CSS, kein JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Marquee-Komponenten erstellen endlose, kontinuierlich scrollende Inhaltsstreifen – ideal für Markenlogos, Ankündigungsbanner, Testimonials oder Tag Clouds. Das Frutjam-Festzelt wurde vollständig mit CSS-Animationen erstellt und unterstützt horizontale und vertikale Richtungen, Pause beim Schweben, umkehrbare Wiedergabe und Geschwindigkeitssteuerung. Duplizieren Sie das Element marquee-track (mit aria-hidden), um eine nahtlose, lückenlose Schleife zu erhalten.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
marqueeBaseÄußerer Container – Clips überlaufen und enthalten Animationsvariablen
marquee-trackModifikatorScrollen in der inneren Reihe; Duplizieren Sie mit aria-hidden für eine nahtlose Schleife
marquee-pauseModifikatorHält die Animation beim Schweben an
marquee-reverseModifikatorScrollt in die entgegengesetzte Richtung
marquee-verticalModifikatorScrollt von oben nach unten statt von links nach rechts
marquee-slowSpeedLangsames Scrollen (40-Sekunden-Zyklus)
marquee-normalSpeedStandardgeschwindigkeit (20s-Zyklus)
marquee-fastSpeedSchnelles Scrollen (10-Sekunden-Zyklus)
marquee-fadeModifikatorFügt auf beiden Seiten Farbverlaufs-Ausblendkanten hinzu

Grundlegende Verwendung

Fügen Sie zwei identische marquee-track-Elemente hinzu – das zweite (mit aria-hidden="true") füllt die Lücke, während das erste vom Bildschirm scrollt.

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>
  )
}

Halten Sie beim Schweben an

Fügen Sie marquee-pause hinzu, um die Animation zu stoppen, wenn der Benutzer mit der Maus über den Streifen fährt.

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>

Richtung umkehren

Verwenden Sie marquee-reverse, um von rechts nach links statt von links nach rechts zu scrollen. Kombinieren Sie zwei Reihen für einen Schichteffekt.

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>

Geschwindigkeitsvarianten

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>

Vertikales Festzelt

Fügen Sie marquee-vertical hinzu und geben Sie dem Container eine feste Höhe für einen Bildlauf von oben nach unten.

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>

Technologie-Tags

Ein gängiges Muster zur Präsentation von Fähigkeiten oder Technologie-Stacks.

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>

Benutzerdefinierte Lücke

Überschreiben Sie --marquee--gap oder --marquee--duration mit einem Inline-Dienstprogramm, um Abstand und Geschwindigkeit zu optimieren.

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>

Kanten verblassen

Fügen Sie marquee-fade hinzu, um beide Enden des Streifens in den Seitenhintergrund einzublenden und so ein elegantes Aussehen zu erzielen.

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>

Ankündigungsbanner

Eine schlanke Tickerleiste für Werbeaktionen oder standortweite Mitteilungen. Kombinieren Sie marquee-fade und marquee-pause für das beste Erlebnis.

🎉 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-Festzelt

Präsentieren Sie Partner oder vertrauenswürdige Marken in einem kontinuierlich scrollenden Streifen. Verwenden Sie marquee-fade, um die Kanten mit dem Hintergrund zu verschmelzen.

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>

Zeugniskarten

Scrollen Sie durch die Testimonial-Karten und halten Sie beim Hover eine dezente Pause ein, um die Lesbarkeit zu erhöhen.

"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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Festzelt-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP