update

src/components/PopupCard/index.js

@@ -75,10 +75,34 @@ const PopupCard = () => {
               </div>
               {/* divider */}
               <div className="border-2 border-red-600 my-5"></div>
-              {/* right */}
+              {/* middle */}
               <div className="flex">
-                <textarea class="resize rounded-md w-1/2"></textarea>
+                {/* right */}
+                <textarea
+                  class="resize relative w-1/2 border-2 rounded-md text-sm
+                focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
+                ></textarea>
+                <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>
           </div>