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

master
mahdi 2 years ago
parent 1b0e7369b9
commit a95c47ddba
  1. 79
      src/components/Advertisement/Design1/index.js
  2. 9
      tailwind.config.js

@ -2,50 +2,45 @@ import React from "react";
const AdvertisementDesign1 = () => { const AdvertisementDesign1 = () => {
return ( 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 <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> </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>
); );
}; };

@ -1,9 +1,5 @@
module.exports = { 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' darkMode: "class", // or 'media' or 'class'
theme: { theme: {
extend: { extend: {
@ -12,8 +8,5 @@ module.exports = {
}, },
}, },
}, },
variants: {
extend: {},
},
plugins: [require("flowbite/plugin")], plugins: [require("flowbite/plugin")],
}; };

Loading…
Cancel
Save