<div
class="relative mx-auto w-full max-w-lg rounded-3xl bg-white p-4 ring-8 shadow-sm shadow-slate-500/10 ring-slate-900/5"
>
<div class="mx-auto max-w-lg">
<div class="flex space-x-2 px-3 pt-4 pb-2 sm:space-x-4 sm:px-6">
<div class="size-10 flex-none">
<img
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=160&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&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-full object-cover"
/>
</div>
<div class="grow space-y-1">
<h4
class="mb-1 flex flex-col text-sm font-semibold sm:flex-row sm:items-center sm:space-x-1"
>
<span class="flex items-center space-x-1">
<a href="javascript:void(0)" class="hover:underline">John Doe</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="font-medium text-slate-500">@john.doe</span>
<span class="font-medium text-slate-500">• just now</span>
</span>
</h4>
<p class="text-sm text-slate-700">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac
cursus nibh sapien in purus. Mauris tincidunt tincidunt.
</p>
<div class="grid grid-cols-2 gap-2 sm:-ml-2 sm:grid-cols-4">
<div>
<button
type="button"
class="group flex items-center space-x-1 text-sm font-semibold text-slate-400 transition hover:text-sky-500"
>
<span
class="inline-flex h-10 w-6 items-center justify-center rounded-full group-hover:bg-sky-100 group-active:bg-sky-50 sm:w-10"
>
<svg
class="hi-outline hi-chat-alt inline-block size-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
></path>
</svg>
</span>
<span>126</span>
</button>
</div>
<div>
<button
type="button"
class="group flex items-center space-x-1 text-sm font-semibold text-slate-400 transition hover:text-emerald-500"
>
<span
class="inline-flex h-10 w-6 items-center justify-center rounded-full group-hover:bg-emerald-100 group-active:bg-emerald-50 sm:w-10"
>
<svg
class="hi-outline hi-refresh inline-block size-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
></path>
</svg>
</span>
<span>155</span>
</button>
</div>
<div>
<button
type="button"
class="group flex items-center space-x-1 text-sm font-semibold text-slate-400 transition hover:text-rose-500"
>
<span
class="inline-flex h-10 w-6 items-center justify-center rounded-full group-hover:bg-rose-100 group-active:bg-rose-50 sm:w-10"
>
<svg
class="hi-outline hi-heart inline-block size-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
</span>
<span>280</span>
</button>
</div>
<div>
<button
type="button"
class="group flex items-center space-x-1 text-sm font-semibold text-slate-400 transition hover:text-sky-500"
>
<span
class="inline-flex h-10 w-6 items-center justify-center rounded-full group-hover:bg-sky-100 group-active:bg-sky-50 sm:w-10"
>
<svg
class="hi-outline hi-share inline-block size-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
></path>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>