update

src/components/bookDesign/BookDesign.js

@@ -4,7 +4,7 @@ import React from "react";
 import book from "../../assets/images/book.svg";
 import bookCover from "../../assets/images/book-white-cover.svg";
 
-export const BookDesign = () => {
+export const BookDesign = ({ bookBackCoverBg }) => {
   return (
     <section className="w-11/12 mx-auto p-4 bg-gray-300 rounded-md shadow-md my-8">
       {/* title holder */}
@@ -13,6 +13,15 @@ export const BookDesign = () => {
           طراحی کتاب
         </button>
       </div>
+      <div className="my-4">
+        <p className="leading-10">
+          نام این کامپوننت
+          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
+            bookDesign
+          </span>
+          است.
+        </p>
+      </div>
       {/* Book Ui Design */}
       <section className="my-24 mx-24 flex flex-wrap justify-center">
         <div className="flex relative">
@@ -22,10 +31,25 @@ export const BookDesign = () => {
             className="rounded-md z-40 transform -translate-x-3 w-full sm:w-72 h-full"
           />
           <img src={bookCover} alt="" className="z-30 h-full" />
-          <div className="bg-greenBookBg w-7 rounded-l-md transform translate-x-4 z-10"></div>
+          <div
+            className={`bg-greenBookBg w-7 rounded-l-md transform translate-x-4 z-10 ${bookBackCoverBg} `}
+          ></div>
           <div className="w-10/12 absolute left-7 -bottom-0 h-11 shadow-2xl shadow-black"></div>
         </div>
       </section>
     </section>
   );
 };
+
+export default BookDesign;
+
+// color classes that i defined in tailwind.config.js and we can use for background color:
+// ----> bg-greenBookBg
+// ----> bg-darkGreenBookBg
+// ----> bg-lightBlueBookBg
+// ----> bg-lightSkyBlueBookBg
+// ----> bg-darkNavyBlueBookBg
+
+BookDesign.defaultProps = {
+  bookBackCoverBg: "bg-greenBookBg",
+};

src/components/counterDesign/CounterDesign.js

@@ -23,6 +23,15 @@ const CounterDesign = ({
           طراحی کانتر
         </h2>
       </div>
+      <div className="my-4">
+        <p className="leading-10">
+          نام این کامپوننت
+          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
+            counterDesign
+          </span>
+          است.
+        </p>
+      </div>
       <div className="flex-col items-center  justify-center">
         {likeBtn && (
           <div className="flex items-center">

src/components/productTags/ProductTags.js

@@ -44,6 +44,15 @@ const ProductTags = ({
           تگ محصولات
         </h2>
       </div>
+      <div className="my-4">
+        <p className="leading-10">
+          نام این کامپوننت
+          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
+            productTags
+          </span>
+          است.
+        </p>
+      </div>
       {/* product UI Design */}
       <div className="flex flex-wrap items-center justify-around ">
         <div className="mt-2 flex flex-wrap w-1/5	">

tailwind.config.js

@@ -42,6 +42,10 @@ module.exports = {
       lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100%
       lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100%
       greenBookBg: "#5DA041",
+      darkGreenBookBg: "#293636",
+      lightBlueBookBg: "#9BBCCC",
+      lightSkyBlueBookBg: "#B2D6EE",
+      darkNavyBlueBookBg: "#0E0E0E",
     }),
     borderColor: (theme) => ({
       ...theme("colors"),