Styled text input

src/index.css

@@ -735,7 +735,7 @@ TODO: Responsive ===========================
   appearance: none;
   background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
   background-position: calc(100% - 0.75rem) center !important;
-  border: 0.5px solid #E3E4FE; 
+  @apply border border-pink;
 }
 
 .dark .reminder-select select {
@@ -764,6 +764,7 @@ TODO: Responsive ===========================
   padding: 1.25rem;
   background: #fafafa;
   border-radius: 9999px;
+  @apply border border-pink;
 }
 
 .dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
@@ -788,4 +789,6 @@ TODO: Responsive ===========================
 .react-date-picker__inputGroup__leadingZero{
   cursor: pointer;
   color: #374151;
-}
+}
+
+.animate-fadeIn {@apply transition duration-300}