customized date picker

frontend/assets/css/tailwind.css

@@ -271,4 +271,40 @@
     button {
         @apply cursor-pointer;
     }
+
+    .vpd-main {
+        @apply !w-full !border-none !p-0;
+    }
+
+    .vpd-input-group {
+        @apply !flex-row-reverse;
+    }
+
+    .vpd-input-group > input {
+        @apply !border-e-0 !rounded-none !rounded-s-100 !px-4;
+    }
+
+    .vpd-input-group > label {
+        @apply !rounded-e-100;
+    }
+
+    .vpd-main > .vpd-wrapper > .vpd-container {
+        @apply !rounded-xl !overflow-hidden;
+    }
+
+    .vpd-main.error > .vpd-input-group > #vpd-vpd-date-picker {
+        @apply border-danger-600 border-2;
+    }
+
+    .vpd-main > .vpd-input-group > .vpd-icon-btn {
+        @apply !bg-black;
+    }
+
+    .vpd-main.error > .vpd-input-group > .vpd-icon-btn {
+        @apply bg-danger-600 border-danger-600 border-t-2 border-r-2 border-b;
+    }
+
+    .vpd-controls button {
+        @apply flex justify-center items-center;
+    }
 }