<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
SOLD OUT
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-16 w-16 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-gray-500 py-1 text-center text-xs text-white shadow-md"
>
NEW
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
PREMIUM
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-36 w-36 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-gray-500 py-1.5 text-center text-base text-white shadow-md"
>
BEST SELLER
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-1 -top-1 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-1 w-1 bg-gray-700"></div>
<div class="absolute bottom-0 right-0 h-1 w-1 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
PREMIUM
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-indigo-600"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-indigo-600"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
PREMIUM
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-4 -top-4 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-4 w-4 bg-gray-700"></div>
<div class="absolute bottom-0 right-0 h-4 w-4 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
PREMIUM
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-green-800"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-green-800"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-green-500 py-1 text-center text-sm text-white shadow-md"
>
PREMIUM
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-red-300"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-red-300"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-red-100 py-1 text-center text-sm text-red-600 shadow-md"
>
PREMIUM
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-yellow-600"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-yellow-600"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-yellow-400 py-1 text-center text-sm text-black shadow-md"
>
PREMIUM
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- top-left -->
<div class="pointer-events-none absolute -left-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 right-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute bottom-0 left-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute left-0 bottom-0 block w-[141.42%] origin-bottom-left -rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
SOLD OUT
</div>
</div>
<!-- top-right -->
<div class="pointer-events-none absolute -right-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute right-0 bottom-0 w-[141.42%] origin-bottom-right rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
SOLD OUT
</div>
</div>
<!-- bottom-right -->
<div class="pointer-events-none absolute -bottom-2 -right-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute bottom-0 left-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute top-0 right-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute top-0 right-0 block w-[141.42%] origin-top-right -rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
SOLD OUT
</div>
</div>
<!-- bottom-left -->
<div class="a pointer-events-none absolute -bottom-2 -left-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute bottom-0 right-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute top-0 left-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute top-0 left-0 block w-[141.42%] origin-top-left rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
SOLD OUT
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- bottom-right -->
<div class="pointer-events-none absolute -bottom-2 -right-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute bottom-0 left-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute top-0 right-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute top-0 right-0 block w-[141.42%] origin-top-right -rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
<span class="inline-block -scale-100"> SOLD OUT </span>
</div>
</div>
<!-- bottom-left -->
<div class="a pointer-events-none absolute -bottom-2 -left-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute bottom-0 right-0 h-2 w-2 bg-gray-700"></div>
<div class="absolute top-0 left-0 h-2 w-2 bg-gray-700"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<div
class="pointer-events-auto absolute top-0 left-0 block w-[141.42%] origin-top-left rotate-45 bg-gray-500 py-1 text-center text-sm text-white shadow-md"
>
<span class="inline-block -scale-100"> SOLD OUT </span>
</div>
</div>
</div>
<!-- placeholder box -->
<div class="relative w-96 max-w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, id et accusamus, praesentium aliquam vel adipisci incidunt pariatur, laborum
quis debitis totam. In corporis nulla molestiae eaque eius, cumque deserunt.
</p>
<!-- 1:1 ribbon container -->
<div class="pointer-events-none absolute -right-2 -top-2 h-24 w-24 overflow-hidden rounded-sm">
<!-- flaps -->
<div class="absolute top-0 left-0 h-2 w-2 bg-indigo-600"></div>
<div class="absolute bottom-0 right-0 h-2 w-2 bg-indigo-600"></div>
<!-- The value 1.4142 is the hypotenuse of a 1:1 triangle, calculated using the Pythagorean theorem. -->
<a
href="#"
class="pointer-events-auto absolute right-0 bottom-0 block w-[141.42%] origin-bottom-right rotate-45 bg-indigo-500 py-1 text-center text-sm text-white shadow-md hover:bg-indigo-400"
>
PREMIUM
</a>
</div>
</div>