<div
class="relative mx-auto w-full max-w-sm rounded-3xl bg-white p-4 ring-8 shadow-sm shadow-slate-500/10 ring-slate-900/5"
>
<div class="flex items-center justify-between px-6 py-4">
<h3 class="text-xl font-medium">Earnings</h3>
<button
type="button"
class="inline-flex h-10 items-center justify-center text-slate-400 hover:text-indigo-500 active:text-slate-600"
>
<svg
class="hi-mini hi-cog-8-tooth inline-block size-5 transition"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<div class="flex grow items-center justify-between px-6 pb-6">
<dl>
<dt class="text-2xl font-bold">$3,670</dt>
<dd class="text-sm font-medium text-slate-500">This month</dd>
</dl>
<div
class="inline-flex items-center space-x-1 rounded-md bg-emerald-200 px-1.5 py-1 text-sm leading-4 font-semibold text-emerald-700"
>
<svg
class="hi-mini hi-arrow-up inline-block size-4 opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd"
/>
</svg>
<span>2.6%</span>
</div>
</div>
<div class="px-2 pb-2">
<div class="overflow-hidden rounded-lg text-indigo-200">
<svg
class="w-full"
viewBox="0 0 1000 500"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M 0,495.01443789956 C 5.199999999999998,490.8291637927556 42.6,480.6248312053363 71,474.0880673655379 C 99.4,467.55130352573946 113.6,470.3498713081252 142,462.33061870056787 C 170.4,454.3113660930105 184.6,448.34097658442397 213,433.9918043277511 C 241.4,419.64263207107825 255.6,408.0392375091671 284,390.5847574172036 C 312.4,373.1302773252402 326.6,347.57436530774606 355,346.7194038679338 C 383.4,345.86444242812155 397.6,388.10689141982334 426,386.30995021814226 C 454.4,384.5130090164612 468.6,351.23637877699565 497,337.7346978595284 C 525.4,324.23301694206117 539.6,350.8881026454411 568,318.8015456308061 C 596.4,286.7149886161711 610.6,192.13889660503196 639,177.30191278635345 C 667.4,162.46492896767495 681.6,233.96915498419335 710,244.61662653741365 C 738.4,255.26409809063395 752.6,234.8754831280235 781,230.53927055245492 C 809.4,226.20305797688636 823.6,248.13926238288883 852,222.9355636595708 C 880.4,197.73186493625275 894.6,109.83549866599051 923,104.52077693586472 C 951.4,99.20605520573892 979.8,177.9937193943264 994,196.36195500894183,L 1000 500,L 0 500Z"
fill="currentColor"
/>
</svg>
</div>
</div>
</div>