almost finish tailwind transform

resources/sass/components/_elements.scss

@@ -1,42 +1,94 @@
 // Elements
 
-label {
-    display: block;
+.text-shadow {
+    text-shadow: 1px 1px 2px #000;
 }
 
-textarea,
-input {
-    width: 100%;
-    border: 1px solid $light;
-    background-color: $greyLight;
-    font-size: 1.6rem;
-    font-family: $fontMain;
-    padding: 0.5rem 1rem;
-    border-radius: 0.2rem;
-
-    &:focus {
-        background-color: $white;
-        border-color: $dark;
-    }
+.left-8 {
+    left: 2rem;
 }
 
-input[type="checkbox"] {
-    width: unset;
+.left-80 {
+    left: 20rem;
+}
 
-    & + label {
-        display: inline;
-    }
+.-bottom-12 {
+    bottom: -3rem;
+}
+
+.max-h-64 {
+    max-height: 16rem;
+}
+
+.page-title {
+    @apply text-3xl font-bold text-orange-900;
 }
 
 a {
-    color: $mediumDark;
+    @apply text-orange-700;
 
-    &:focus,
-    &:visited {
-        color: $dark;
+    &:hover {
+        @apply text-orange-900;
     }
 }
 
-pre {
+$modal-duration: 1s;
 
+.modal-container {
+    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
+}
+
+.modal {
+    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    animation-name: modalopen;
+    animation-duration: $modal-duration;
+}
+
+.box-toggle {
+    @apply shadow;
+
+    &-header {
+        @apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
+
+        svg {
+            @apply w-8 text-orange-600 fill-current;
+        }
+    }
+
+    svg {
+        transform: rotate(270deg);
+        transition: transform 0.3s;
+
+        &.open {
+            transform: rotate(90deg);
+        }
+    }
+
+    &-content {
+        padding: 0.5rem 1rem;
+    }
+}
+
+.card {
+    @apply bg-orange-300 rounded;
+
+    svg {
+        @apply max-w-full max-h-64 m-auto fill-current;
+    }
+
+    h2 {
+        @apply text-2xl text-center font-bold;
+    }
+
+    &:hover {
+        @apply bg-orange-500;
+
+        h2 {
+            @apply text-orange-700;
+        }
+    }
 }