#09090b
1<div class="w-[196px] rounded-2xl bg-zinc-900 p-3 text-white shadow-2xl shadow-black ring-1 ring-white/10">2 <div class="flex items-center gap-2.5">3 <div class="grid size-11 shrink-0 place-items-center rounded-xl bg-[conic-gradient(from_200deg,#bef264,#22d3ee,#a78bfa,#bef264)] text-zinc-900">4 <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>5 </div>6 <div class="min-w-0">7 <p class="text-[9px] font-bold uppercase tracking-widest text-lime-300">Episódio 42</p>8 <p class="truncate text-[13px] font-semibold">Papo de quintal</p>9 <p class="truncate text-[10px] text-zinc-400">Hortas em apartamento</p>10 </div>11 </div>12 <div class="mt-3 flex h-9 items-center gap-[3px] overflow-hidden">13 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:40%;animation-delay:-0.00s"></i>14 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:65%;animation-delay:-0.17s"></i>15 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:85%;animation-delay:-0.34s"></i>16 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:55%;animation-delay:-0.51s"></i>17 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:95%;animation-delay:-0.68s"></i>18 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:70%;animation-delay:-0.85s"></i>19 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:45%;animation-delay:-1.02s"></i>20 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:80%;animation-delay:-0.09s"></i>21 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:100%;animation-delay:-0.26s"></i>22 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:60%;animation-delay:-0.43s"></i>23 <i class="w-[3px] shrink-0 rounded-full bg-lime-300 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:75%;animation-delay:-0.60s"></i>24 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:50%;animation-delay:-0.77s"></i>25 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:85%;animation-delay:-0.94s"></i>26 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:65%;animation-delay:-0.01s"></i>27 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:40%;animation-delay:-0.18s"></i>28 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:70%;animation-delay:-0.35s"></i>29 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:90%;animation-delay:-0.52s"></i>30 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:55%;animation-delay:-0.69s"></i>31 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:35%;animation-delay:-0.86s"></i>32 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:60%;animation-delay:-1.03s"></i>33 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:80%;animation-delay:-0.10s"></i>34 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:45%;animation-delay:-0.27s"></i>35 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:30%;animation-delay:-0.44s"></i>36 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:55%;animation-delay:-0.61s"></i>37 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:40%;animation-delay:-0.78s"></i>38 <i class="w-[3px] shrink-0 rounded-full bg-zinc-600 animate-[onda_1.1s_ease-in-out_infinite] motion-reduce:animate-none" style="height:25%;animation-delay:-0.95s"></i>39 </div>40 <div class="mt-1 flex justify-between font-mono text-[9px] text-zinc-500"><span>12:08</span><span>-31:40</span></div>41 <div class="mt-2 flex items-center justify-between px-2">42 <button class="text-[10px] font-semibold text-zinc-400 transition hover:text-white">↺ 15</button>43 <button class="grid size-9 place-items-center rounded-full bg-lime-300 text-zinc-900 shadow-lg shadow-lime-300/20 transition hover:scale-110">44 <svg class="size-4" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>45 </button>46 <button class="text-[10px] font-semibold text-zinc-400 transition hover:text-white">15 ↻</button>47 </div>48</div>