feat(15): initial styling of step 3

15-multi-step-form/src/main/resources/public/out.css

@@ -548,14 +548,65 @@ video {
   bottom: 0px;
 }
 
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
 .col-start-2 {
   grid-column-start: 2;
 }
 
+.row-span-full {
+  grid-row: 1 / -1;
+}
+
+.row-span-2 {
+  grid-row: span 2 / span 2;
+}
+
 .row-start-1 {
   grid-row-start: 1;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
+.m-4 {
+  margin: 1rem;
+}
+
+.m-6 {
+  margin: 1.5rem;
+}
+
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.my-7 {
+  margin-top: 1.75rem;
+  margin-bottom: 1.75rem;
+}
+
 .-mt-20 {
   margin-top: -5rem;
 }
@@ -580,6 +631,22 @@ video {
   margin-top: 0.3rem;
 }
 
+.ml-\[200px\] {
+  margin-left: 200px;
+}
+
+.ml-\[100px\] {
+  margin-left: 100px;
+}
+
+.ml-\[70px\] {
+  margin-left: 70px;
+}
+
+.ml-20 {
+  margin-left: 5rem;
+}
+
 .flex {
   display: flex;
 }
@@ -632,6 +699,14 @@ video {
   height: 100%;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
 .w-11\/12 {
   width: 91.666667%;
 }
@@ -656,6 +731,14 @@ video {
   width: 100vw;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -678,6 +761,10 @@ video {
   grid-template-columns: repeat(4, auto);
 }
 
+.grid-cols-\[1fr_100px\] {
+  grid-template-columns: 1fr 100px;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -707,6 +794,14 @@ video {
        column-gap: 1.25rem;
 }
 
+.self-center {
+  align-self: center;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -762,6 +857,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
 .bg-sidebar-mobile {
   background-image: url("images/bg-sidebar-mobile.svg");
 }
@@ -803,6 +903,18 @@ video {
   padding-top: 0.75rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -988,6 +1100,14 @@ html {
   background-color: hsl(217 100% 97% / var(--tw-bg-opacity));
 }
 
+.peer:checked ~ .peer-checked\:bg-magnolia\/50 {
+  background-color: hsl(217 100% 97% / 0.5);
+}
+
+.peer:checked ~ .peer-checked\:bg-magnolia\/20 {
+  background-color: hsl(217 100% 97% / 0.2);
+}
+
 .peer:checked ~ .peer-checked\:text-cool-gray {
   --tw-text-opacity: 1;
   color: hsl(231 11% 63% / var(--tw-text-opacity));