update

src/App.js

@@ -5,7 +5,7 @@ import ProductDesign from "./components/productDesign/ProductDesign";
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
+      <ProductDesign />
       <ButtonDesign />
     </div>
   );

src/components/buttonDesign/ButtonDesign.js

@@ -17,9 +17,18 @@ const ButtonDesign = () => {
   return (
     <div>
       <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">
+        <div className="flex items-center justify-between">
           <h2 className="text-lg text-black">طراحی دکمه های سایت</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">
+              buttonDesign
+            </span>
+            است.
+          </p>
+        </div>
         {/* Button UI Design */}
         <div className="flex flex-wrap justify-around items-center">
           <div>

src/components/productDesign/ProductDesign.scss

@@ -3,7 +3,7 @@
 }
 
 .product-item {
-  @apply w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border p-2 my-3;
+  @apply w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border-2 border-productDesignBorderColor p-2 my-3;
 }
 
 .discountPriceBtn {

tailwind.config.js

@@ -35,6 +35,8 @@ module.exports = {
     }),
     borderColor: (theme) => ({
       ...theme("colors"),
+      // used in ProductDesign Component
+      productDesignBorderColor: "#F3F3F3",
       // used in ButtonDesign Component
       moreInfoButtonBorderColor: "#06BACE",
     }),