update

src/App.js

@@ -3,28 +3,30 @@ import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 import ProductDesign from "./components/productDesign/ProductDesign";
 import ProductTags from "./components/productTags/ProductTags";
 import CounterDesign from "./components/counterDesign/CounterDesign";
-import { BookDesign } from "./components/bookDesign/BookDesign";
+import BookDesign from "./components/bookDesign/BookDesign";
 import BlogDesign1 from "./components/Blogs/design1/BlogDesign1";
 import BlogDesign2 from "./components/Blogs/design2/BlogDesign2";
 import BlogDesign3 from "./components/Blogs/design3/BlogDesign3";
 import BlogDesign4 from "./components/Blogs/design4/BlogDesign4";
 import BlogDesign5 from "./components/Blogs/design5/BlogDesign5";
 import BlogDesign6 from "./components/Blogs/design6/BlogDesign6";
+import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
 
 function App() {
   return (
     <div className="App">
-      <ProductDesign />
+      {/* <ProductDesign /> */}
-      <BookDesign />
+      {/* <BookDesign /> */}
-      <ButtonDesign />
+      {/* <ButtonDesign /> */}
-      <ProductTags />
+      {/* <ProductTags /> */}
-      <CounterDesign />
+      {/* <CounterDesign /> */}
-      <BlogDesign1 />
+      {/* <BlogDesign1 /> */}
-      <BlogDesign2 />
+      {/* <BlogDesign2 /> */}
-      <BlogDesign3 />
+      {/* <BlogDesign3 /> */}
-      <BlogDesign4 />
+      {/* <BlogDesign4 /> */}
-      <BlogDesign5 />
+      {/* <BlogDesign5 /> */}
-      <BlogDesign6 />
+      {/* <BlogDesign6 /> */}
+      <HeaderDesign1 />
     </div>
   );
 }

src/components/Header/desgin1/HeaderDesign1.js

@@ -0,0 +1,43 @@
+import React from "react";
+
+const HeaderDesign1 = () => {
+  return (
+    <header className="p-4">
+      <div class="container flex justify-between items-center mx-auto py-2 px-8 md:px-14 lg:px-24 w-full bg-white rounded shadow-sm">
+        <div class="text-lg font-bold text-productPrice  w-1/5	">
+          Design System
+        </div>
+        <div class="hidden lg:flex items-center justify-around w-3/5">
+          <a href="#" className="text-productPrice">
+            محصولات
+          </a>
+          <a href="#" className="text-productPrice">
+            دسته بندی
+          </a>
+          <a href="#" className="text-productPrice">
+            تماس با ما
+          </a>
+          <a href="#" className="text-productPrice">
+            درباره ما
+          </a>
+          <a href="#" className="text-productPrice">
+            پیگیری
+          </a>
+          <a href="#" className="text-productPrice">
+            وبلاگ
+          </a>
+        </div>
+        <div className="w-1/5	 flex justify-end">
+          <button className="ml-2 py-2 px-8 text-productPrice text-sm font-light rounded border border-darkCrimsonBorderColor">
+            ورود
+          </button>
+          <button className="py-2 px-8 text-white text-sm font-light rounded bg-darkCrimsonBgColor">
+            ثبت نام
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HeaderDesign1;

tailwind.config.js

@@ -47,6 +47,7 @@ module.exports = {
       lightBlueBookBg: "#9BBCCC",
       lightSkyBlueBookBg: "#B2D6EE",
       darkNavyBlueBookBg: "#0E0E0E",
+      darkCrimsonBgColor: "#132F52",
     }),
     borderColor: (theme) => ({
       ...theme("colors"),
@@ -59,6 +60,7 @@ module.exports = {
       lightGreenBorderColor: "#5DCE06",
       lightPurpleBorderColor: "#A680FF",
       darkBlueBorderColor: "#0615CE",
+      darkCrimsonBorderColor: "#132F52",
     }),
   },
   plugins: [],