#f1f5f9
1<div class="group w-[196px] rounded-2xl bg-white p-3 shadow-xl shadow-slate-900/10 ring-1 ring-slate-200">2 <div class="flex gap-3">3 <div class="relative h-[62px] w-14 shrink-0 [perspective:300px]">4 <div class="absolute inset-0 grid place-items-center overflow-hidden rounded-lg bg-rose-50 text-center ring-1 ring-rose-200">5 <p class="text-[9px] font-bold uppercase leading-tight text-rose-600">Sábado<br><span class="text-sm text-slate-900">9h às 17h</span></p>6 </div>7 <div class="absolute inset-0 origin-top overflow-hidden rounded-lg bg-white text-center shadow-md ring-1 ring-rose-200 transition duration-500 ease-out group-hover:[transform:rotateX(-70deg)_translateY(10px)] group-hover:opacity-0">8 <p class="bg-rose-500 py-0.5 text-[9px] font-bold uppercase tracking-widest text-white">Out</p>9 <p class="text-[26px] font-black leading-[38px] text-slate-900">18</p>10 </div>11 </div>12 <div class="min-w-0">13 <p class="text-[9px] font-bold uppercase tracking-wider text-rose-500">Feira</p>14 <p class="text-[13px] font-semibold leading-tight text-slate-900">Feira de artesanato da praça</p>15 <p class="mt-1 flex items-center gap-1 text-[10px] text-slate-500">16 <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>Praça do Carmo17 </p>18 </div>19 </div>20 <div class="mt-3 flex gap-2">21 <button class="flex flex-1 items-center justify-center gap-1 rounded-lg bg-slate-900 py-1.5 text-[11px] font-semibold text-white transition hover:bg-rose-500">22 <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4M12 13v5M9.5 15.5h5"/></svg>Salvar na agenda23 </button>24 <button class="grid size-8 place-items-center rounded-lg border border-slate-200 text-slate-600 transition hover:bg-slate-100">25 <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13"/></svg>26 </button>27 </div>28</div>