productTagsAdded

src/App.js

@@ -1,12 +1,14 @@
 import "./App.scss";
 import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 import ProductDesign from "./components/productDesign/ProductDesign";
+import ProductTags from "./components/productTags/ProductTags";
 
 function App() {
   return (
     <div className="App">
-      <ProductDesign />
+      {/* <ProductDesign /> */}
-      <ButtonDesign />
+      {/* <ButtonDesign /> */}
+      <ProductTags />
     </div>
   );
 }

src/assets/icons/black-cancle-icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10.471" height="10.471" viewBox="0 0 10.471 10.471">
+  <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+    <g id="card-remove" transform="translate(253.309 512.31)">
+      <path id="Vector" d="M0,8.774,8.774,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
+      <path id="Vector-2" data-name="Vector" d="M8.774,8.774,0,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/black-delivery-icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.887" height="15.887" viewBox="0 0 15.887 15.887">
+  <g id="vuesax_linear_group" data-name="vuesax/linear/group" transform="translate(-748 -188)">
+    <g id="group" transform="translate(748 188)">
+      <path id="Vector" d="M6.282,7.943h.662A1.328,1.328,0,0,0,8.268,6.619V0H2.31A2.645,2.645,0,0,0,0,1.357" transform="translate(1.661 1.324)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-2" data-name="Vector" d="M0,7.943A1.983,1.983,0,0,0,1.986,9.929h.662a1.324,1.324,0,1,1,2.648,0H7.943a1.324,1.324,0,1,1,2.648,0h.662a1.983,1.983,0,0,0,1.986-1.986V5.958H11.253a.664.664,0,0,1-.662-.662V3.31a.664.664,0,0,1,.662-.662h.854L10.975.669A1.335,1.335,0,0,0,9.823,0H8.605V4.634A1.328,1.328,0,0,1,7.281,5.958H6.619" transform="translate(1.324 3.31)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-3" data-name="Vector" d="M2.648,1.324A1.324,1.324,0,1,1,1.324,0,1.324,1.324,0,0,1,2.648,1.324Z" transform="translate(3.972 11.915)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-4" data-name="Vector" d="M2.648,1.324A1.324,1.324,0,1,1,1.324,0,1.324,1.324,0,0,1,2.648,1.324Z" transform="translate(9.267 11.915)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-5" data-name="Vector" d="M2.648,1.986V3.31H.662A.664.664,0,0,1,0,2.648V.662A.664.664,0,0,1,.662,0h.854Z" transform="translate(11.915 5.958)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-6" data-name="Vector" d="M0,0H3.972" transform="translate(1.324 5.296)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-7" data-name="Vector" d="M0,0H2.648" transform="translate(1.324 7.281)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-8" data-name="Vector" d="M0,0H1.324" transform="translate(1.324 9.267)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-9" data-name="Vector" d="M0,0H15.887V15.887H0Z" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/black-right-icon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.887" height="15.887" viewBox="0 0 15.887 15.887">
+  <g id="vuesax_linear_shield-tick" data-name="vuesax/linear/shield-tick" transform="translate(-300 -188)">
+    <g id="shield-tick" transform="translate(300 188)">
+      <path id="Vector" d="M4.687.154,1.383,1.4A2.3,2.3,0,0,0,0,3.391V8.309a3.218,3.218,0,0,0,1.145,2.277l2.846,2.125a3.013,3.013,0,0,0,3.4,0l2.846-2.125a3.218,3.218,0,0,0,1.145-2.277V3.391a2.3,2.3,0,0,0-1.383-2L6.7.154A3.366,3.366,0,0,0,4.687.154Z" transform="translate(2.257 1.322)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-2" data-name="Vector" d="M0,1.781,1.066,2.846,3.912,0" transform="translate(5.991 6.077)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H15.887V15.887H0Z" transform="translate(15.887 15.887) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/productTags/ProductTags.js

@@ -0,0 +1,169 @@
+import React from "react";
+
+import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg";
+import blackDeliveryIcon from "../../assets/icons/black-delivery-icon.svg";
+import blackRightIcon from "../../assets/icons/black-right-icon.svg";
+
+const ProductTags = () => {
+  return (
+    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-base bg-red-500 rounded-full shadow-sm shadow-black text-white p-2">
+          تگ محصولات
+        </h2>
+      </div>
+      {/* product UI Design */}
+      <div className="flex flex-wrap items-center justify-around ">
+        {/* 1 */}
+        <div className="mt-2 flex flex-wrap w-1/4	 ">
+          <button className=" rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            ارسال رایگان
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            برچسب های دیگر
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان سخت
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان آسان
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            آزمون
+          </button>
+        </div>
+        {/* 2 */}
+        <div className="mt-2 flex flex-wrap w-1/4	">
+          <button className=" rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
+            ارسال رایگان
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            برچسب های دیگر
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان سخت
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+          </button>
+          <button className="rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
+            امتحان آسان
+          </button>
+          <button className="rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+          </button>
+          <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            آزمون
+          </button>
+        </div>
+        {/* 3 */}
+        <div className="mt-2 flex flex-wrap w-1/4	">
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            ارسال رایگان
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            برچسب های دیگر
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان سخت
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان آسان
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            آزمون
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+        </div>
+        {/* 4 */}
+        <div className="mt-2 flex flex-wrap w-1/4	">
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            ارسال رایگان
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            برچسب های دیگر
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان سخت
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان آسان
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            آزمون
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+        </div>
+        {/* 5 */}
+        <div className="mt-2 flex flex-wrap w-1/4	">
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
+            ارسال رایگان
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            <img src={blackRightIcon} alt="" className="ml-1 w-3" />
+            ارسال رایگان
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            برچسب های دیگر
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان سخت
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            امتحان آسان
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            بسته بندی به صورت کادو
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+          <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+            آزمون
+            <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProductTags;

tailwind.config.js

@@ -39,6 +39,8 @@ module.exports = {
       productDesignBorderColor: "#F3F3F3",
       // used in ButtonDesign Component
       moreInfoButtonBorderColor: "#06BACE",
+      // used in ProductTags Component
+      productTagBorderColor1: "#C3C3C3",
     }),
   },
   plugins: [],