<div
class="mx-auto w-full max-w-lg rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm sm:p-6"
>
<div class="mb-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<a
href="javascript:void(0)"
class="group relative inline-block rounded-full border border-zinc-200 p-0.5"
>
<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&w=160"
alt="User Avatar"
class="relative block size-12 rounded-full border-2 border-white object-cover"
/>
<div
class="absolute right-0 bottom-0 size-4 rounded-full border-2 border-white bg-emerald-500"
></div>
</a>
<div>
<h4 class="flex items-center gap-1 font-bold text-zinc-900">
<a href="javascript:void(0)" class="hover:text-rose-600"
>Alex Rivera</a
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-circle-check-big inline-block size-4 text-blue-600"
>
<path d="M21.801 10A10 10 0 1 1 17 3.335" />
<path d="m9 11 3 3L22 4" />
</svg>
</h4>
<div class="flex items-center gap-1 text-sm text-zinc-500">
<span>@alex.rivera.food</span>
<span>•</span>
<span>2h</span>
</div>
</div>
</div>
<button
type="button"
class="group flex size-8 items-center justify-center rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700"
aria-label="More options"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-ellipsis-vertical inline-block size-6"
>
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</div>
<div class="mb-4">
<p class="leading-relaxed text-zinc-700">
Exploring the hidden culinary gems of Tokyo has been a dream come true!
🍜✨ Every corner reveals a new flavor, a new story. The dedication to
craft here is simply unmatched.
</p>
<div class="mt-2 flex flex-wrap gap-2 text-sm font-medium text-rose-600">
<a href="javascript:void(0)" class="hover:underline">#TokyoEats</a>
<a href="javascript:void(0)" class="hover:underline">#CulinaryJourney</a>
<a href="javascript:void(0)" class="hover:underline">#FoodPhotography</a>
</div>
</div>
<div class="mb-5 grid grid-cols-3 gap-1 overflow-hidden rounded-2xl">
<div class="col-span-2 row-span-2">
<a
href="javascript:void(0)"
class="group block h-full overflow-hidden bg-zinc-100"
>
<img
src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?q=80&w=800&auto=format&fit=crop"
class="h-full w-full object-cover transition duration-500 group-hover:scale-110"
alt="Main dish"
/>
</a>
</div>
<div class="col-span-1">
<a
href="javascript:void(0)"
class="group block h-40 overflow-hidden bg-zinc-100 sm:h-48"
>
<img
src="https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?q=80&w=400&auto=format&fit=crop"
class="h-full w-full object-cover transition duration-500 group-hover:scale-110"
alt="Side dish 1"
/>
</a>
</div>
<div class="col-span-1">
<a
href="javascript:void(0)"
class="group relative block h-40 overflow-hidden bg-zinc-100 sm:h-48"
>
<img
src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?q=80&w=400&auto=format&fit=crop"
class="h-full w-full object-cover transition duration-500 group-hover:scale-110"
alt="Side dish 2"
/>
<div
class="absolute inset-0 flex items-center justify-center bg-black/30 font-semibold text-white backdrop-blur-[1px] transition group-hover:bg-black/40"
>
+4
</div>
</a>
</div>
</div>
<div class="flex items-center justify-between border-t border-zinc-100 pt-4">
<div class="flex items-center gap-6">
<button
type="button"
class="group flex items-center gap-1.5 text-zinc-500 transition hover:text-rose-600"
aria-label="Like"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-heart inline-block size-6 transition group-hover:scale-110 group-active:scale-90"
>
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
/>
</svg>
<span class="text-sm font-medium">5.3k</span>
</button>
<button
type="button"
class="group flex items-center gap-1.5 text-zinc-500 transition hover:text-sky-600"
aria-label="Comment"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-message-circle inline-block size-6 transition group-hover:scale-110 group-active:scale-90"
>
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
</svg>
<span class="text-sm font-medium">685</span>
</button>
<button
type="button"
class="group flex items-center gap-1.5 text-zinc-500 transition hover:text-emerald-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-repeat-2 inline-block size-6 transition group-hover:scale-110 group-active:scale-90"
aria-label="Repost"
>
<path d="m2 9 3-3 3 3" />
<path d="M13 18H7a2 2 0 0 1-2-2V6" />
<path d="m22 15-3 3-3-3" />
<path d="M11 6h6a2 2 0 0 1 2 2v10" />
</svg>
<span class="text-sm font-medium">278</span>
</button>
</div>
<div>
<button
type="button"
class="group flex items-center justify-center text-zinc-400 transition hover:text-rose-600"
aria-label="Bookmark"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-bookmark inline-block size-6 transition group-hover:scale-110 group-active:scale-90"
>
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
</svg>
</button>
</div>
</div>
</div>