update

src/components/PopupCard/index.js

@@ -24,7 +24,7 @@ const PopupCard = () => {
         className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
       >
         <div className="relative p-4 w-full h-full md:h-auto">
-          <div className="w-9/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <div className="w-8/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
             <div className="flex justify-between items-start p-5 rounded-t">
               {/* cancle icon */}
               <div
@@ -36,43 +36,50 @@ const PopupCard = () => {
               </div>
             </div>
             {/* modalBody */}
-            {/* top */}
-            <div className="px-5 mt-3 flex ">
-              {/* right */}
-              <input
-                type="text"
-                className="relative w-1/2 border-2 rounded-md text-sm h-12
+            <div className="w-11/12 mx-auto mt-3">
+              {/* top */}
+              <div className="flex">
+                {/* right */}
+                <input
+                  type="text"
+                  className="relative w-1/2 border-2 rounded-md text-sm h-12
                 focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
-                style={{
-                  color: "#00253A",
-                  borderColor: activeInput ? "#22577E" : "#06BACE",
-                }}
-                onFocus={() => setActiveInput(true)}
-                onBlur={() => setActiveInput(false)}
-              />
-              {/* ${activeInput ? "text-red-500" : "text-yellow-400"} */}
-              <span
-                className={`absolute right-10 -mt-2  bg-white text-xs px-2 font-bold`}
-                style={{ color: activeInput ? "#22577E" : "#06BACE" }}
-              >
-                نام کارت
-              </span>
-              {/* left */}
-              {/* <div
-                date-rangepicker
-                className="flex items-center w-1/2 bg-red-600"
-              >
-                <div className="relative w-full">
-                  <img src={calender} className="absolute top-3 left-2" />
-                  <input
-                    name="start"
-                    type="text"
-                    className="w-full border-2 border-blue-400 rounded-md text-sm h-12
-                    focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
-                    placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
-                  />
+                  style={{
+                    color: "#00253A",
+                    borderColor: activeInput ? "#22577E" : "#06BACE",
+                  }}
+                  onFocus={() => setActiveInput(true)}
+                  onBlur={() => setActiveInput(false)}
+                />
+                <span
+                  className={`absolute right-20 -mt-2  bg-white text-xs px-2 font-bold`}
+                  style={{ color: activeInput ? "#22577E" : "#06BACE" }}
+                >
+                  نام کارت
+                </span>
+                {/* divider */}
+                <div className="bg-[#DBDBDB] w-0.5 mx-5"></div>
+                {/* left */}
+                <div date-rangepicker className="flex items-center w-1/2">
+                  <div className="relative w-full">
+                    <img src={calender} className="absolute top-3 left-2" />
+                    <input
+                      name="start"
+                      type="text"
+                      className="w-full border-2 border-blue-400 rounded-md text-sm h-12
+                    focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
+                      placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
+                    />
+                  </div>
                 </div>
-              </div> */}
+              </div>
+              {/* divider */}
+              <div className="border-2 border-red-600 my-5"></div>
+              {/* right */}
+              <div className="flex">
+                <textarea class="resize rounded-md w-1/2"></textarea>
+                <div className="bg-[#DBDBDB] w-0.5 mx-5"></div>
+              </div>
             </div>
           </div>
         </div>