Ribbons

    <div class="flex-auto p-4 relative">
    <div class="absolute w-full h-[188px] -top-2 left-2 overflow-hidden">
        <div
          class=" after:absolute after:content-['']  after:bg-primary-600 after:w-2 after:h-10 after:rounded-br-[8px] after:rounded-tr-[8px] after:right-0 after:top-[50px] before:absolute before:content-[''] before:bg-primary-600 before:w-10 before:h-2  before:right-[50px] before:rounded-t-[8px] before:rounded-tr-[8px]">
          <span class="absolute transform rotate-45 bg-primary-500 text-center text-white font-medium py-1 right-[-52px] top-[23px] w-[170px] h-5 z-[2] text-xs overflow-hidden border border-dashed leading-[8px] border-white shadow-[0_0_0_3px] shadow-primary-500">Popular</span>
        </div>
    </div>
    <div class="flex flex-wrap">
        <div class="w-1/3">
            <img src="assets/images/dashboards/dastyle.jpg" class="" alt="">
        </div>
        <div class="w-2/3 pl-4 self-center">
            <p class="text-lg font-medium mb-2 dark:text-slate-300">Dastyle - Admin & Dashboard Template</p>
            <p class="text-slate-400 text-sm mb-4">Dastyle is a Bootstrap 4 admin dashboard, 
                It is fully responsive and included awesome 
                features to help build web applications fast and easy.
            </p>
            <button class="px-2 py-2 lg:px-4 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600">Download New</button>
        </div>
    </div>
</div><!--end card-body-->

<div class="flex-auto p-4 relative">
    <div class="absolute w-full h-[188px] -top-2 left-2 overflow-hidden">
        <div
          class=" after:absolute after:content-['']  after:bg-green-600 after:w-2 after:h-10 after:rounded-br-[8px] after:rounded-tr-[8px] after:right-0 after:top-[50px] before:absolute before:content-[''] before:bg-green-600 before:w-10 before:h-2  before:right-[50px] before:rounded-t-[8px] before:rounded-tr-[8px]">
          <span class="absolute transform rotate-45 bg-green-500 text-center text-white font-medium py-1 right-[-52px] top-[23px] w-[170px] h-5 z-[2] text-xs overflow-hidden border border-dashed leading-[8px] border-white shadow-[0_0_0_3px] shadow-green-500">Popular</span>
        </div>
    </div>
    <div class="flex flex-wrap">
        <div class="w-1/3">
            <img src="assets/images/dashboards/metrica.jpg" class="" alt="">
        </div>
        <div class="w-2/3 pl-4 self-center">
            <p class="text-lg font-medium mb-2 dark:text-slate-300">Metrica - Admin & Dashboard Template</p>
            <p class="text-slate-400 text-sm mb-4">Dastyle is a Bootstrap 4 admin dashboard, 
                It is fully responsive and included awesome 
                features to help build web applications fast and easy.
            </p>
            <button class="px-2 py-2 lg:px-4 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600">Download New</button>
        </div>
    </div>
</div><!--end card-body-->

                                       
<div class="w-full sm:w-full md:w-1/2 lg:w-1/2  mx-auto">
    <div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative overflow-hidden">  
        <div class="absolute left-0 top-0 h-14 w-14">
            <div class="absolute left-[-36px] top-[32px] w-[170px] transform -rotate-45 bg-primary-500 text-center text-sm text-white font-semibold py-1">50% off</div>
        </div>                              
        <div class="flex-auto p-4 text-center">
            <img src="assets/images/products/01.png" alt="" class="h-44 inline-block mb-4">
            <span class="text-slate-500 text-sm block font-medium mb-1">Electric</span>
            <a href="ecommerce-product-detail.html" class="text-lg font-semibold text-slate-700 dark:text-gray-400 leading-3">White Table Camera <span class="bg-yellow-600/5 text-yellow-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">3.6 <i class="mdi mdi-star"></i></span></a>
            
            <div class="py-1 px-3 rounded-md bg-slate-50 mt-6 dark:bg-slate-600/20">
                <div class="grid grid-cols-2">
                    <div class="col-span-1 border-r border-dashed dark:border-r-slate-700">
                        <h4 class="text-4xl font-medium dark:text-slate-300"><sup class="text-sm text-slate-500">$</sup>49</h4>
                    </div>
                    <div class="col-span-1 self-center">
                        <button class="inline-block focus:outline-none text-primary-500 hover:bg-transparent hover:text-primary-500 bg-transparent text-md font-medium py-1 px-3 rounded"> <i class="ti ti-shopping-cart"></i> Add to cart</button>
                    </div>
                </div>
            </div>
        </div><!--end card-body-->
    </div> <!--end card-->
</div>

<div class="w-full sm:w-full md:w-1/2 lg:w-1/2  mx-auto">
    <div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative overflow-hidden">  
        <div class="absolute left-0 top-0 h-14 w-14">
            <div class="absolute left-[-36px] top-[32px] w-[170px] transform -rotate-45 bg-primary-500 text-center text-sm text-white font-semibold py-1">50% off</div>
        </div>                              
        <div class="flex-auto p-4 text-center">
            <img src="assets/images/products/02.png" alt="" class="h-44 inline-block mb-4">
            <span class="text-slate-500 text-sm block font-medium mb-1">Fashion & Life Style</span>
            <a href="ecommerce-product-detail.html" class="text-lg font-semibold text-slate-700 dark:text-gray-400 leading-3">New Colorfull Shoes <span class="bg-yellow-600/5 text-yellow-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">3.6 <i class="mdi mdi-star"></i></span></a>
            
            <div class="py-1 px-3 rounded-md bg-slate-50 mt-6 dark:bg-slate-600/20">
                <div class="grid grid-cols-2">
                    <div class="col-span-1 border-r border-dashed dark:border-r-slate-700">
                        <h4 class="text-4xl font-medium dark:text-slate-300"><sup class="text-sm text-slate-500">$</sup>99</h4>
                    </div>
                    <div class="col-span-1 self-center">
                        <button class="inline-block focus:outline-none text-primary-500 hover:bg-transparent hover:text-primary-500 bg-transparent text-md font-medium py-1 px-3 rounded"> <i class="ti ti-shopping-cart"></i> Add to cart</button>
                    </div>
                </div>
            </div>
        </div><!--end card-body-->
    </div> <!--end card-->
</div>