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,8 +36,9 @@ const PopupCard = () => {
               </div>
             </div>
             {/* modalBody */}
+            <div className="w-11/12 mx-auto mt-3">
               {/* top */}
-            <div className="px-5 mt-3 flex ">
+              <div className="flex">
                 {/* right */}
                 <input
                   type="text"
@@ -50,29 +51,35 @@ const PopupCard = () => {
                   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`}
+                  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 bg-red-600"
-              >
+                <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-blue-500 focus:ring-1 focus:ring-blue-500"
+                    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>