update src/components/Advertisement/Design1/index.js and tailwind.config.js

src/components/Advertisement/Design1/index.js

@@ -2,50 +2,45 @@ import React from "react";
 
 const AdvertisementDesign1 = () => {
   return (
-    <section className="mx-auto bg-white m-10 w-full sm:w-8/12 md:w-5/12 lg:w-3/12">
+    <div className="w-72 h-96 rounded-3xl relative overflow-hidden bg-[#E3F2FF]">
       <div
-        className="w-full h-96 rounded-3xl relative overflow-hidden"
+        style={{
-        style={{ backgroundColor: "#E3F2FF" }}
+          width: "calc(100vw / 10)",
-      >
+          height: "calc(100vw / 10)",
-        <div
+          left: "20%",
-          style={{
+          top: "15%",
-            width: "calc(100vw / 10)",
+        }}
-            height: "calc(100vw / 10)",
+        className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30"
-            left: "20%",
+      ></div>
-            top: "15%",
+      <div
-          }}
+        style={{
-          className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30"
+          width: "calc(100vw / 7)",
-        ></div>
+          height: "calc(100vw / 7)",
-        <div
+          right: "25%",
-          style={{
+          bottom: "4%",
-            width: "calc(100vw / 7)",
+        }}
-            height: "calc(100vw / 7)",
+        className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md"
-            right: "25%",
+      ></div>
-            bottom: "4%",
+      <div
-          }}
+        style={{
-          className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md"
+          width: "calc(100vw / 8)",
-        ></div>
+          height: "calc(100vw / 8)",
-        <div
+          right: "3%",
-          style={{
+          top: "15%",
-            width: "calc(100vw / 8)",
+        }}
-            height: "calc(100vw / 8)",
+        className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md"
-            right: "3%",
+      ></div>
-            top: "15%",
+      <div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50">
-          }}
+        <h2 className="text-lg">تبلیغات دانوینی</h2>
-          className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md"
+        <p className="text-sm text-justify leading-6 mt-2">
-        ></div>
+          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
-        <div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50">
+          از طراحان گرافیک است.
-          <h2 className="text-lg">تبلیغات دانوینی</h2>
+        </p>
-          <p className="text-sm text-justify leading-6 mt-2">
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-            استفاده از طراحان گرافیک است.
-          </p>
-        </div>
-        <button className="rounded-sm text-base border p-3 w-6/12 absolute left-1/2 bottom-2 transform -translate-x-1/2 -translate-y-1/2 z-50">
-          دانلود اپلیکیشن
-        </button>
       </div>
-    </section>
+      <button className="rounded-sm text-base border p-3 w-6/12 absolute left-1/2 bottom-2 transform -translate-x-1/2 -translate-y-1/2 z-50">
+        دانلود اپلیکیشن
+      </button>
+    </div>
   );
 };
 

tailwind.config.js

@@ -1,9 +1,5 @@
 module.exports = {
-  purge: [
+  content: ["./pages/**/*.{html,js}", "./components/**/*.{html,js}"],
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./public/index.html",
-    "./node_modules/flowbite/**/*.js",
-  ],
   darkMode: "class", // or 'media' or 'class'
   theme: {
     extend: {
@@ -12,8 +8,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [require("flowbite/plugin")],
 };