DOCUMENTATION

   <div x-data="{show: false }" class="bg-gray-600 md:w-full rounded">
        <div class="bg-secondary position-relative " style="height: 200px; ">
        <div class="iq-ribbon-effect absolute  before:border-t-white after:border-t-white flex bg-white dark:bg-dark-bg top-0 ltr:left-8 rtl:right-8 z-50 whitespace-nowrap uppercase p-2.5 text-blue-600 " style="margin-left: 5rem;">
        <span class="rotate-180">NEW</span>
        </div>
        <div class="iq-ribbon-effect absolute  before:border-t-white after:border-t-white flex bg-white dark:bg-dark-bg top-0 ltr:left-8 rtl:right-8 z-50 whitespace-nowrap uppercase p-2.5 text-green-600 " style="margin-left: 10rem;">
        <span class="rotate-180">DISCOUNT</span>
        </div>
        <div class="iq-ribbon-effect absolute  before:border-t-white after:border-t-white flex bg-white dark:bg-dark-bg top-0 ltr:left-8 rtl:right-8 z-50 whitespace-nowrap uppercase p-2.5 text-red-600 " style="margin-left: 15rem;">
        <span class="rotate-180">NEW OFFERS </span>
        </div>
        </div>
    </div>