update

src/components/productDesign/ProductDesign.js

@@ -83,23 +83,25 @@ const ProductDesign = ({
             className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
           >
             <div className="w-full relative">
-              {discountPricePercent && (
-                <div className="bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1">
-                  <p className="text-discountPriceTitle font-bold text-xs">
-                    23<span>%</span>
-                  </p>
-                </div>
-              )}
-              {likeBtn && (
-                <div className="bg-likeBtnBg absolute left-2 top-10 rounded-md p-1">
-                  <img src={heart} alt="" className="w-full" />
-                </div>
-              )}
-              {discount && (
-                <div className="absolute left-2 top-20 rounded-md">
-                  <img src={discountImg} alt="" className="w-full" />
-                </div>
-              )}
+              <div className="absolute left-2 top-2">
+                {discountPricePercent && (
+                  <div className="bg-discountPriceBg rounded-md px-2 py-2">
+                    <p className="text-discountPriceTitle font-bold text-xs">
+                      23<span>%</span>
+                    </p>
+                  </div>
+                )}
+                {likeBtn && (
+                  <div className="bg-likeBtnBg rounded-md py-1 flex justify-center">
+                    <img src={heart} alt="" className="w-5" />
+                  </div>
+                )}
+                {discount && (
+                  <div className="absolute rounded-md">
+                    <img src={discountImg} alt="" className="w-full" />
+                  </div>
+                )}
+              </div>
               {/* img Holder */}
               <div className="flex-shrink-0">
                 {verticalImg && (