<div
class="relative mx-auto flex w-full max-w-lg flex-col gap-3 rounded-lg bg-white p-4 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5 sm:p-6"
>
<div class="flex items-center gap-2">
<div class="size-10 flex-none">
<img
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=160&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MjYzODYzMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=160"
alt="User Avatar"
class="inline-block aspect-square w-full rounded-3xl object-cover"
/>
</div>
<h4 class="flex grow flex-col text-sm">
<span class="flex items-center gap-1">
<a href="javascript:void(0)" class="font-semibold hover:underline"
>Alex Rivera</a
>
<svg
class="hi-solid hi-badge-check inline-block size-5 text-sky-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
</span>
<span>
<span class="text-slate-600">@alex.rivera.food</span>
<span class="text-slate-500">· 25min</span>
</span>
</h4>
</div>
<div>
<div class="flex flex-col gap-3">
<p class="text-sm/relaxed text-slate-700">
Amazing weekend food tour through Tokyo! 🍜🍣 From street-side ramen to
michelin-starred sushi, every bite was incredible. The karaage chicken
was crispy perfection and that matcha ice cream... pure heaven!
<a href="javascript:void(0)" class="text-blue-600 hover:underline"
>#TokyoFoodie</a
>
<a href="javascript:void(0)" class="text-blue-600 hover:underline"
>#JapaneseFood</a
>
<a href="javascript:void(0)" class="text-blue-600 hover:underline"
>#Foodstagram</a
>
</p>
<div class="grid grid-cols-2 gap-3">
<a
href="javascript:void(0)"
class="block transition-opacity hover:opacity-75"
>
<img
src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3"
alt="Ramen bowl"
class="aspect-4/3 w-full rounded-xl object-cover"
/>
</a>
<a
href="javascript:void(0)"
class="block transition-opacity hover:opacity-75"
>
<img
src="https://images.unsplash.com/photo-1579584425555-c3ce17fd4351?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3"
alt="Sushi platter"
class="aspect-4/3 w-full rounded-xl object-cover"
/>
</a>
<a
href="javascript:void(0)"
class="block transition-opacity hover:opacity-75"
>
<img
src="https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3"
alt="Karaage chicken"
class="aspect-4/3 w-full rounded-xl object-cover"
/>
</a>
<a
href="javascript:void(0)"
class="block transition-opacity hover:opacity-75"
>
<img
src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3"
alt="Matcha ice cream"
class="aspect-4/3 w-full rounded-xl object-cover"
/>
</a>
</div>
</div>
<div class="-mx-2 mt-2 flex flex-wrap items-center justify-between gap-0.5">
<div>
<button
type="button"
class="group flex items-center text-xs font-medium text-slate-500 transition hover:text-sky-500"
>
<span
class="inline-flex size-8 items-center justify-center rounded-full group-hover:bg-sky-100 group-active:bg-sky-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-chat-bubble-left inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
/>
</svg>
</span>
<span>428</span>
</button>
</div>
<div>
<button
type="button"
class="group flex items-center text-xs font-medium text-slate-500 transition hover:text-emerald-500"
>
<span
class="inline-flex size-8 items-center justify-center rounded-full group-hover:bg-emerald-100 group-active:bg-emerald-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-arrow-path inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</span>
<span>142</span>
</button>
</div>
<div>
<button
type="button"
class="group flex items-center text-xs font-medium text-slate-500 transition hover:text-rose-500"
>
<span
class="inline-flex size-8 items-center justify-center rounded-full group-hover:bg-rose-100 group-active:bg-rose-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-heart inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
/>
</svg>
</span>
<span>3.2k</span>
</button>
</div>
<div>
<button
type="button"
class="group flex items-center text-xs font-medium text-slate-500 transition hover:text-sky-500"
>
<span
class="inline-flex size-8 items-center justify-center rounded-full group-hover:bg-sky-100 group-active:bg-sky-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-chart-bar inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
/>
</svg>
</span>
<span>18.7k</span>
</button>
</div>
<div>
<div class="flex flex-wrap items-center gap-1">
<button
type="button"
class="group flex items-center text-xs font-medium text-slate-500 transition hover:text-sky-500"
>
<span
class="inline-flex size-8 items-center justify-center rounded-full group-hover:bg-sky-100 group-active:bg-sky-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-bookmark inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
/>
</svg>
</span>
</button>
<button
type="button"
class="group flex items-center text-xs font-medium text-slate-500 transition hover:text-sky-500"
>
<span
class="inline-flex size-8 items-center justify-center rounded-full group-hover:bg-sky-100 group-active:bg-sky-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-arrow-up-tray inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>