refact css tailwind

resources/sass/components/_elements.scss

@@ -1,57 +1,37 @@
 // Elements
 
-.text-shadow {
-    text-shadow: 1px 1px 2px #000;
-}
-
-.left-8 {
-    left: 2rem;
-}
-
-.left-80 {
-    left: 20rem;
-}
-
-.-bottom-12 {
-    bottom: -3rem;
-}
-
-.max-h-64 {
-    max-height: 16rem;
-}
-
-@for $i from 1 through 9 {
-
-    .bg-primary-#{$i}00 {
-        @apply bg-green-#{$i}00;
-    }
-
-    .hover:bg-primary-#{$i}00 {
-        @apply bg-green-#{$i}00;
-    }
-
-    .bg-secondary-#{$i}00 {
-        @apply bg-blue-#{$i}00;
-    }
-
-    .text-primary-#{$i}00 {
-        @apply text-gray-#{$i}00;
-    }
-
-    .hover:text-primary-#{$i}00 {
-        @apply text-gray-#{$i}00;
-    }
-}
+//@for $i from 1 through 9 {
+//
+//    .bg-primary-#{$i}00 {
+//        @apply bg-green-#{$i}00;
+//    }
+//
+//    .hover:bg-primary-#{$i}00 {
+//        @apply bg-green-#{$i}00;
+//    }
+//
+//    .bg-secondary-#{$i}00 {
+//        @apply bg-blue-#{$i}00;
+//    }
+//
+//    .text-primary-#{$i}00 {
+//        @apply text-gray-#{$i}00;
+//    }
+//
+//    .hover:text-primary-#{$i}00 {
+//        @apply text-gray-#{$i}00;
+//    }
+//}
 
 .page-title {
-    @apply text-3xl font-bold text-primary-900;
+    @apply text-3xl font-bold text-gray-900;
 }
 
 a {
-    @apply text-primary-700;
+    @apply text-gray-700;
 
     &:hover {
-        @apply text-primary-900;
+        @apply text-gray-900;
     }
 }
 
@@ -73,10 +53,10 @@ a {
     @apply shadow;
 
     &-header {
-        @apply flex justify-between items-center px-4 py-2 rounded bg-primary-400 font-bold cursor-pointer;
+        @apply flex justify-between items-center px-4 py-2 text-white bg-gray-800 font-bold cursor-pointer;
 
         svg {
-            @apply w-8 text-primary-600 fill-current;
+            @apply w-8 fill-current;
         }
     }
 
@@ -91,15 +71,15 @@ a {
     }
 
     &-content {
-        @apply px-4 py-2;
+        @apply px-4 py-2 bg-white;
     }
 }
 
 .card {
-    @apply bg-primary-300 rounded;
+    @apply bg-gray-300 rounded text-black;
 
     svg {
-        @apply max-w-full max-h-64 m-auto fill-current;
+        @apply max-w-full max-h-48 max-w-48 m-auto fill-current;
     }
 
     h2 {
@@ -107,10 +87,10 @@ a {
     }
 
     &:hover {
-        @apply bg-primary-500;
+        @apply bg-gray-500 text-gray-700;
 
         h2 {
-            @apply text-primary-700;
+            @apply text-gray-700;
         }
     }
 }