#f4f2ff
1<div class="group relative w-60 pb-36">2 <input id="entendi" type="checkbox" class="peer sr-only" />3 <div class="flex items-center gap-1.5 rounded-xl bg-white p-1.5 shadow-sm ring-1 ring-violet-100">4 <span class="rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-500">Editar</span>5 <span class="rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-500">Filtrar</span>6 <span class="relative ml-auto rounded-lg bg-violet-600 px-3 py-1.5 text-xs font-semibold text-white">7 Exportar8 <span class="absolute -right-1 -top-1 flex size-3 group-has-[:checked]:hidden"><span class="absolute inline-flex size-full animate-ping rounded-full bg-fuchsia-400"></span><span class="relative inline-flex size-3 rounded-full bg-fuchsia-500 ring-2 ring-white"></span></span>9 </span>10 </div>11 <div class="balao absolute right-0 top-[calc(100%-8.25rem)] w-52 rounded-2xl bg-slate-900 p-3.5 text-white shadow-xl shadow-violet-300/60 transition duration-300 peer-checked:pointer-events-none peer-checked:-translate-y-2 peer-checked:opacity-0">12 <span class="absolute -top-1.5 right-7 size-3 rotate-45 rounded-sm bg-slate-900"></span>13 <span class="rounded-full bg-fuchsia-500 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider">Novo</span>14 <p class="mt-2 text-sm font-semibold">Exporte em PDF</p>15 <p class="mt-1 text-xs leading-snug text-slate-300">Agora seu relatório sai pronto para imprimir, com capa e sumário.</p>16 <div class="mt-3 flex items-center justify-between">17 <span class="text-[11px] text-slate-400">1 de 3</span>18 <label for="entendi" class="cursor-pointer rounded-lg bg-white px-3 py-1 text-xs font-bold text-slate-900 transition hover:bg-fuchsia-100">Entendi</label>19 </div>20 </div>21 <label for="entendi" class="absolute bottom-6 left-0 right-0 hidden cursor-pointer text-center text-xs font-medium text-violet-500 underline peer-checked:block">Ver dica de novo</label>22</div>