1<label class="relative inline-flex cursor-pointer items-center">2 <input type="checkbox" class="peer sr-only" checked />3 <div class="flex h-9 w-16 items-center justify-between rounded-full bg-white/10 px-2 text-xs peer-checked:bg-gradient-to-r peer-checked:from-violet-600 peer-checked:to-cyan-500">4 <span>☀️</span><span>🌙</span>5 </div>6 <span class="absolute left-1 top-1 h-7 w-7 rounded-full bg-white transition peer-checked:translate-x-7"></span>7</label>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Hinweis: Diese Komponente nutzt Tailwind-Utility-Klassen. Stelle sicher, dass Tailwind in deinem Projekt eingebunden ist — per npx tailwindcss oder CDN cdn.tailwindcss.com (nur für Prototypen).
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Ein absolutes Premium-Element mit extremen Mikro-Animationen. Die Wolken morphen durch flüssige Skalierung ihrer Pseudo-Elemente physisch in leuchtende Sterne (und zurück), während sie die Seite wechseln. Die Sonne hat eine weiche, mehrschichtige Corona (Glow), und der Mond rotiert beim Einrasten plastisch ins Bild, wobei tiefe, detaillierte Krater mit inneren Schatten sichtbar werden.