<div
class="mx-auto w-full max-w-sm rounded-3xl bg-white/40 p-3 shadow-sm shadow-slate-300 backdrop-blur-xs"
>
<div
class="group relative flex flex-col overflow-hidden rounded-2xl bg-gray-50 before:absolute before:-top-full before:-right-full before:-bottom-full before:-left-full before:-m-96 before:block before:animate-[spin_3s_linear_infinite] before:bg-[conic-gradient(#38bdf8,transparent,transparent)] before:opacity-0 before:content-[''] hover:before:opacity-75"
>
<div class="relative m-0.5 grow rounded-xl bg-gray-50 p-6 lg:p-8 xl:p-10">
<div
class="absolute end-2 top-2 rounded-full bg-gray-200/50 px-2 py-1 text-xs font-medium text-gray-950"
>
Built with v4
</div>
<div class="relative mb-8 w-12">
<svg
viewBox="0 0 50 31"
class="absolute right-0 bottom-0 inline-block size-10 translate-x-2 translate-y-2 opacity-25 transition group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-0"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z"
fill="#38bdf8"
></path></svg
><svg
viewBox="0 0 50 31"
class="relative inline-block size-12 transition group-hover:translate-x-1 group-hover:translate-y-1"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z"
fill="#38bdf8"
></path>
</svg>
</div>
<h4 class="mb-3 text-xl font-bold">Tailwind CSS</h4>
<p class="text-sm leading-relaxed font-medium text-gray-600">
A utility-first CSS framework packed with classes to rapidly build
modern websites without ever leaving your HTML.
</p>
</div>
</div>
</div>