push

app.css

@@ -2,6 +2,26 @@
   background-color: transparent;
 }
 
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(245, 245, 245, var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 229, 229, var(--tw-bg-opacity));
+}
+
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(115, 115, 115, var(--tw-bg-opacity));
+}
+
 .bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgba(82, 82, 82, var(--tw-bg-opacity));
@@ -17,6 +37,11 @@
   background-color: rgba(38, 38, 38, var(--tw-bg-opacity));
 }
 
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
+}
+
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
@@ -41,6 +66,10 @@
   border-radius: 0.25rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .border-0 {
   border-width: 0px;
 }
@@ -109,10 +138,18 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-6 {
   height: 1.5rem;
 }
 
+.h-7 {
+  height: 1.75rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -121,6 +158,14 @@
   height: 2.25rem;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
+.h-3\/5 {
+  height: 60%;
+}
+
 .h-full {
   height: 100%;
 }
@@ -135,11 +180,20 @@
   line-height: 1.75rem;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .mr-8 {
   margin-right: 2rem;
 }
@@ -205,10 +259,50 @@
   position: relative;
 }
 
+.top-0 {
+  top: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.-bottom-8 {
+  bottom: -2rem;
+}
+
 .-left-10 {
   left: -2.5rem;
 }
 
+.-right-24 {
+  right: -6rem;
+}
+
+.-left-24 {
+  left: -6rem;
+}
+
+.resize {
+  resize: both;
+}
+
 * {
   --tw-shadow: 0 0 #0000;
 }
@@ -236,6 +330,11 @@
   color: rgba(229, 229, 229, var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgba(64, 64, 64, var(--tw-text-opacity));
+}
+
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgba(16, 185, 129, var(--tw-text-opacity));
@@ -262,6 +361,10 @@
   white-space: nowrap;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -270,10 +373,6 @@
   width: 3rem;
 }
 
-.w-28 {
-  width: 7rem;
-}
-
 .w-48 {
   width: 12rem;
 }
@@ -297,6 +396,12 @@
   transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.transition {
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);