feat: add playground

Author: dancixx

assets/tailwind.css

@@ -590,10 +590,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -606,10 +602,6 @@ video {
   margin-top: 0.125rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -622,6 +614,22 @@ video {
   margin-top: auto;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mt-1\.5 {
+  margin-top: 0.375rem;
+}
+
 .block {
   display: block;
 }
@@ -666,6 +674,14 @@ video {
   height: 100%;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
+.max-h-\[40\%\] {
+  max-height: 40%;
+}
+
 .min-h-0 {
   min-height: 0px;
 }
@@ -702,6 +718,10 @@ video {
   width: 100%;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -740,12 +760,20 @@ video {
   cursor: pointer;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
 
+.resize-none {
+  resize: none;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -770,6 +798,10 @@ video {
   gap: 0.125rem;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-1\.5 {
   gap: 0.375rem;
 }
@@ -852,6 +884,10 @@ video {
   border-top-width: 1px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
 .border-\[\#1c2333\] {
   --tw-border-opacity: 1;
   border-color: rgb(28 35 51 / var(--tw-border-opacity, 1));
@@ -880,6 +916,10 @@ video {
   border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
 }
 
+.border-blue-500\/20 {
+  border-color: rgb(59 130 246 / 0.2);
+}
+
 .border-t-amber-400 {
   --tw-border-opacity: 1;
   border-top-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
@@ -915,10 +955,6 @@ video {
   background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
 }
 
-.bg-amber-400\/5 {
-  background-color: rgb(251 191 36 / 0.05);
-}
-
 .bg-amber-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
@@ -968,6 +1004,26 @@ video {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
 }
 
+.bg-amber-400\/5 {
+  background-color: rgb(251 191 36 / 0.05);
+}
+
+.bg-zinc-700\/30 {
+  background-color: rgb(63 63 70 / 0.3);
+}
+
+.bg-amber-500\/20 {
+  background-color: rgb(245 158 11 / 0.2);
+}
+
+.bg-blue-500\/5 {
+  background-color: rgb(59 130 246 / 0.05);
+}
+
+.bg-white\/\[0\.08\] {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -980,6 +1036,10 @@ video {
   padding: 1.25rem;
 }
 
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1130,20 +1190,8 @@ video {
   letter-spacing: 0.05em;
 }
 
-.text-amber-300\/80 {
-  color: rgb(252 211 77 / 0.8);
-}
-
-.text-amber-300\/90 {
-  color: rgb(252 211 77 / 0.9);
-}
-
-.text-amber-400\/60 {
-  color: rgb(251 191 36 / 0.6);
-}
-
-.text-amber-400\/70 {
-  color: rgb(251 191 36 / 0.7);
+.text-amber-300\/70 {
+  color: rgb(252 211 77 / 0.7);
 }
 
 .text-amber-400\/90 {
@@ -1163,23 +1211,11 @@ video {
   color: rgb(245 158 11 / 0.7);
 }
 
-.text-amber-500\/80 {
-  color: rgb(245 158 11 / 0.8);
-}
-
-.text-blue-400\/80 {
-  color: rgb(96 165 250 / 0.8);
-}
-
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }
 
-.text-cyan-400\/70 {
-  color: rgb(34 211 238 / 0.7);
-}
-
 .text-emerald-400 {
   --tw-text-opacity: 1;
   color: rgb(52 211 153 / var(--tw-text-opacity, 1));
@@ -1198,10 +1234,6 @@ video {
   color: rgb(16 185 129 / 0.7);
 }
 
-.text-purple-400\/80 {
-  color: rgb(192 132 252 / 0.8);
-}
-
 .text-purple-500 {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity, 1));
@@ -1230,11 +1262,6 @@ video {
   color: rgb(212 212 216 / var(--tw-text-opacity, 1));
 }
 
-.text-zinc-400 {
-  --tw-text-opacity: 1;
-  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
-}
-
 .text-zinc-500 {
   --tw-text-opacity: 1;
   color: rgb(113 113 122 / var(--tw-text-opacity, 1));
@@ -1250,11 +1277,53 @@ video {
   color: rgb(63 63 70 / var(--tw-text-opacity, 1));
 }
 
+.text-amber-300\/80 {
+  color: rgb(252 211 77 / 0.8);
+}
+
+.text-amber-400\/70 {
+  color: rgb(251 191 36 / 0.7);
+}
+
+.text-amber-500\/80 {
+  color: rgb(245 158 11 / 0.8);
+}
+
+.text-zinc-400 {
+  --tw-text-opacity: 1;
+  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
+}
+
 .text-zinc-800 {
   --tw-text-opacity: 1;
   color: rgb(39 39 42 / var(--tw-text-opacity, 1));
 }
 
+.text-amber-300\/90 {
+  color: rgb(252 211 77 / 0.9);
+}
+
+.text-amber-400\/60 {
+  color: rgb(251 191 36 / 0.6);
+}
+
+.text-blue-400\/80 {
+  color: rgb(96 165 250 / 0.8);
+}
+
+.text-cyan-400\/70 {
+  color: rgb(34 211 238 / 0.7);
+}
+
+.text-purple-400\/80 {
+  color: rgb(192 132 252 / 0.8);
+}
+
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+
 .caret-amber-400 {
   caret-color: #fbbf24;
 }
@@ -1375,6 +1444,10 @@ video {
   background-color: rgb(255 255 255 / 0.06);
 }
 
+.hover\:bg-emerald-500\/30:hover {
+  background-color: rgb(16 185 129 / 0.3);
+}
+
 .hover\:text-amber-400:hover {
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));
@@ -1395,6 +1468,11 @@ video {
   color: rgb(161 161 170 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-blue-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+}
+
 @media (min-width: 768px) {
   .md\:flex {
     display: flex;