almost finish tailwind transform

resources/sass/components/_btn.scss

@@ -68,11 +68,15 @@
 //}
 
 .btn {
-    @apply border bg-orange-400 py-2 px-4 shadow-sm rounded-md;
+    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md;
 
     &:hover {
         @apply text-white bg-orange-600 transition-all duration-300;
     }
+
+    svg {
+        @apply w-4 fill-current mr-2 inline;
+    }
 }
 
 .btn-primary {
@@ -83,3 +87,21 @@
         @apply bg-orange-800;
     }
 }
+
+.btn-secondary {
+    @extend .btn;
+    @apply bg-orange-600;
+
+    &:hover {
+        @apply bg-orange-800;
+    }
+}
+
+.btn-alert {
+    @extend .btn;
+    @apply bg-red-600 text-white;
+
+    &:hover {
+        @apply bg-red-800;
+    }
+}

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;
+        }
+    }
 }

resources/sass/components/_transitions.scss

@@ -4,3 +4,13 @@
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
 }
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}

resources/sass/components/modal.scss

@@ -1,27 +1,25 @@
 $modal-duration: 1s;
 
 .modal-container {
-    background-color: rgba(0,0,0,0.6);
-    position: fixed;
-    z-index: 10;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
 }
 
 .modal {
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    position: absolute;
-    z-index: 20;
-    overflow: hidden;
+    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    max-width: 100%;
     width: 400px;
     animation-name: modalopen;
     animation-duration: $modal-duration;
 }
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}