almost finish tailwind transform

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