react-tailwind-table 1.1.1 → 1.2.0

package/dist/index.css

@@ -1,6 +1,6 @@
-/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v2.2.17 | MIT License | https://tailwindcss.com*/
 
-/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 /*
 Document
@@ -12,8 +12,8 @@ Use a better box model (opinionated).
 */
 
 *,
-*::before,
-*::after {
+::before,
+::after {
   box-sizing: border-box;
 }
 
@@ -21,7 +21,7 @@ Use a better box model (opinionated).
 Use a more readable tab size (opinionated).
 */
 
-:root {
+html {
   -moz-tab-size: 4;
   -o-tab-size: 4;
      tab-size: 4;
@@ -211,6 +211,11 @@ button,
 Remove the inner border and padding in Firefox.
 */
 
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
 /**
 Restore the focus styles unset by the previous rule.
 */
@@ -240,6 +245,11 @@ progress {
 Correct the cursor style of increment and decrement buttons in Safari.
 */
 
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
 /**
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
@@ -254,11 +264,20 @@ Correct the cursor style of increment and decrement buttons in Safari.
 Remove the inner padding in Chrome and Safari on macOS.
 */
 
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
 /**
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to 'inherit' in Safari.
 */
 
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
 /*
 Interactive
 ===========
@@ -303,16 +322,6 @@ button {
   background-image: none;
 }
 
-/**
- * Work around a Firefox/IE bug where the transparent `button` background
- * results in a loss of the default `button` focus styles.
- */
-
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
 fieldset {
   margin: 0;
   padding: 0;
@@ -383,7 +392,7 @@ body {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
+  border-color: currentColor; /* 2 */
 }
 
 /*
@@ -432,6 +441,14 @@ button {
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
 table {
   border-collapse: collapse;
 }
@@ -489,11 +506,20 @@ samp {
 }
 
 /**
- * Make replaced elements `display: block` by default as that's
- * the behavior you want almost all of the time. Inspired by
- * CSS Remedy, with `svg` added as well.
+ * 1. Make replaced elements `display: block` by default as that's
+ *    the behavior you want almost all of the time. Inspired by
+ *    CSS Remedy, with `svg` added as well.
  *
- * https://github.com/mozdevs/cssremedy/issues/14
+ *    https://github.com/mozdevs/cssremedy/issues/14
+ * 
+ * 2. Add `vertical-align: middle` to align replaced elements more
+ *    sensibly by default when overriding `display` by adding a
+ *    utility like `inline`.
+ *
+ *    This can trigger a poorly considered linting error in some
+ *    tools but is included by design.
+ * 
+ *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
  */
 
 img,
@@ -504,13 +530,13 @@ audio,
 iframe,
 embed,
 object {
-  display: block;
-  vertical-align: middle;
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
 }
 
 /**
  * Constrain images and videos to the parent width and preserve
- * their instrinsic aspect ratio.
+ * their intrinsic aspect ratio.
  *
  * https://github.com/mozdevs/cssremedy/issues/14
  */
@@ -521,92 +547,100 @@ video {
   height: auto;
 }
 
-.appearance-none{
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
+/**
+ * Ensure the default browser behavior of the `hidden` attribute.
+ */
+
+[hidden] {
+  display: none;
 }
 
-.bg-white{
-  --tw-bg-opacity:1;
-  background-color:rgba(255, 255, 255, var(--tw-bg-opacity));
+*, ::before, ::after{
+  --tw-border-opacity:1;
+  border-color:rgba(229, 231, 235, var(--tw-border-opacity));
 }
 
-.bg-gray-50{
-  --tw-bg-opacity:1;
-  background-color:rgba(249, 250, 251, var(--tw-bg-opacity));
+.container{
+  width:100%;
 }
 
-.bg-gray-100{
-  --tw-bg-opacity:1;
-  background-color:rgba(243, 244, 246, var(--tw-bg-opacity));
+@media (min-width: 640px){
+  .container{
+    max-width:640px;
+  }
 }
 
-.bg-yellow-50{
-  --tw-bg-opacity:1;
-  background-color:rgba(255, 251, 235, var(--tw-bg-opacity));
+@media (min-width: 768px){
+  .container{
+    max-width:768px;
+  }
 }
 
-.bg-pink-700{
-  --tw-bg-opacity:1;
-  background-color:rgba(190, 24, 93, var(--tw-bg-opacity));
+@media (min-width: 1024px){
+  .container{
+    max-width:1024px;
+  }
 }
 
-.bg-table-col{
-  --tw-bg-opacity:1;
-  background-color:rgba(251, 251, 251, var(--tw-bg-opacity));
+@media (min-width: 1280px){
+  .container{
+    max-width:1280px;
+  }
 }
 
-.hover\:bg-gray-50:hover{
-  --tw-bg-opacity:1;
-  background-color:rgba(249, 250, 251, var(--tw-bg-opacity));
+@media (min-width: 1536px){
+  .container{
+    max-width:1536px;
+  }
 }
 
-.hover\:bg-table-col:hover{
-  --tw-bg-opacity:1;
-  background-color:rgba(251, 251, 251, var(--tw-bg-opacity));
+.pointer-events-none{
+  pointer-events:none;
 }
 
-.border-collapse{
-  border-collapse:collapse;
+.static{
+  position:static;
 }
 
-.border-gray-200{
-  --tw-border-opacity:1;
-  border-color:rgba(229, 231, 235, var(--tw-border-opacity));
+.absolute{
+  position:absolute;
 }
 
-.border-gray-300{
-  --tw-border-opacity:1;
-  border-color:rgba(209, 213, 219, var(--tw-border-opacity));
+.relative{
+  position:relative;
 }
 
-.rounded{
-  border-radius:0.25rem;
+.inset-y-0{
+  top:0px;
+  bottom:0px;
 }
 
-.rounded-lg{
-  border-radius:0.5rem;
+.order-first{
+  order:-9999;
 }
 
-.border{
-  border-width:1px;
+.mt-2{
+  margin-top:0.5rem;
 }
 
-.border-r{
-  border-right-width:1px;
+.mt-3{
+  margin-top:0.75rem;
 }
 
-.border-b{
-  border-bottom-width:1px;
+.mt-4{
+  margin-top:1rem;
 }
 
-.cursor-pointer{
-  cursor:pointer;
+.mt-6{
+  margin-top:1.5rem;
 }
 
-.cursor-not-allowed{
-  cursor:not-allowed;
+.mb-1{
+  margin-bottom:0.25rem;
+}
+
+.mb-2{
+  margin-bottom:0.5rem;
 }
 
 .block{
@@ -625,50 +659,6 @@ video {
   display:none;
 }
 
-.flex-col{
-  flex-direction:column;
-}
-
-.items-center{
-  align-items:center;
-}
-
-.self-end{
-  align-self:flex-end;
-}
-
-.justify-between{
-  justify-content:space-between;
-}
-
-.justify-around{
-  justify-content:space-around;
-}
-
-.flex-grow{
-  flex-grow:1;
-}
-
-.flex-shrink{
-  flex-shrink:1;
-}
-
-.order-first{
-  order:-9999;
-}
-
-.font-normal{
-  font-weight:400;
-}
-
-.font-semibold{
-  font-weight:600;
-}
-
-.font-bold{
-  font-weight:700;
-}
-
 .h-2{
   height:0.5rem;
 }
@@ -697,93 +687,230 @@ video {
   height:0.625rem;
 }
 
-.text-xs{
-  font-size:0.75rem;
-  line-height:1rem;
-}
-
-.text-sm{
-  font-size:0.875rem;
-  line-height:1.25rem;
+.w-2{
+  width:0.5rem;
 }
 
-.text-base{
-  font-size:1rem;
-  line-height:1.5rem;
+.w-3{
+  width:0.75rem;
 }
 
-.leading-4{
-  line-height:1rem;
+.w-4{
+  width:1rem;
 }
 
-.leading-7{
-  line-height:1.75rem;
+.w-5{
+  width:1.25rem;
 }
 
-.leading-9{
-  line-height:2.25rem;
+.w-7{
+  width:1.75rem;
 }
 
-.leading-tight{
-  line-height:1.25;
+.w-52{
+  width:13rem;
 }
 
-.mb-1{
-  margin-bottom:0.25rem;
+.w-2\.5{
+  width:0.625rem;
 }
 
-.ml-1{
-  margin-left:0.25rem;
+.w-full{
+  width:100%;
 }
 
-.mt-2{
-  margin-top:0.5rem;
+.flex-shrink{
+  flex-shrink:1;
 }
 
-.mr-2{
-  margin-right:0.5rem;
+.flex-grow{
+  flex-grow:1;
 }
 
-.mb-2{
-  margin-bottom:0.5rem;
+.table-auto{
+  table-layout:auto;
 }
 
-.ml-2{
-  margin-left:0.5rem;
+.border-collapse{
+  border-collapse:collapse;
 }
 
-.mt-3{
-  margin-top:0.75rem;
+@-webkit-keyframes spin{
+  to{
+    transform:rotate(360deg);
+  }
 }
 
-.mt-4{
-  margin-top:1rem;
+@keyframes spin{
+  to{
+    transform:rotate(360deg);
+  }
 }
 
-.mt-6{
-  margin-top:1.5rem;
+@-webkit-keyframes ping{
+  75%, 100%{
+    transform:scale(2);
+    opacity:0;
+  }
 }
 
-.opacity-50{
-  opacity:0.5;
+@keyframes ping{
+  75%, 100%{
+    transform:scale(2);
+    opacity:0;
+  }
 }
 
-.focus\:outline-none:focus{
-  outline:2px solid transparent;
-  outline-offset:2px;
+@-webkit-keyframes pulse{
+  50%{
+    opacity:.5;
+  }
 }
 
-.overflow-hidden{
-  overflow:hidden;
+@keyframes pulse{
+  50%{
+    opacity:.5;
+  }
 }
 
-.overflow-x-auto{
-  overflow-x:auto;
-}
+@-webkit-keyframes bounce{
+  0%, 100%{
+    transform:translateY(-25%);
+    -webkit-animation-timing-function:cubic-bezier(0.8,0,1,1);
+            animation-timing-function:cubic-bezier(0.8,0,1,1);
+  }
 
-.py-2{
-  padding-top:0.5rem;
-  padding-bottom:0.5rem;
+  50%{
+    transform:none;
+    -webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);
+            animation-timing-function:cubic-bezier(0,0,0.2,1);
+  }
+}
+
+@keyframes bounce{
+  0%, 100%{
+    transform:translateY(-25%);
+    -webkit-animation-timing-function:cubic-bezier(0.8,0,1,1);
+            animation-timing-function:cubic-bezier(0.8,0,1,1);
+  }
+
+  50%{
+    transform:none;
+    -webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);
+            animation-timing-function:cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.cursor-pointer{
+  cursor:pointer;
+}
+
+.cursor-not-allowed{
+  cursor:not-allowed;
+}
+
+.appearance-none{
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+}
+
+.flex-col{
+  flex-direction:column;
+}
+
+.items-center{
+  align-items:center;
+}
+
+.justify-between{
+  justify-content:space-between;
+}
+
+.justify-around{
+  justify-content:space-around;
+}
+
+.self-end{
+  align-self:flex-end;
+}
+
+.overflow-hidden{
+  overflow:hidden;
+}
+
+.overflow-x-auto{
+  overflow-x:auto;
+}
+
+.rounded{
+  border-radius:0.25rem;
+}
+
+.rounded-lg{
+  border-radius:0.5rem;
+}
+
+.border{
+  border-width:1px;
+}
+
+.border-b{
+  border-bottom-width:1px;
+}
+
+.border-gray-200{
+  --tw-border-opacity:1;
+  border-color:rgba(229, 231, 235, var(--tw-border-opacity));
+}
+
+.border-gray-300{
+  --tw-border-opacity:1;
+  border-color:rgba(209, 213, 219, var(--tw-border-opacity));
+}
+
+.bg-white{
+  --tw-bg-opacity:1;
+  background-color:rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+.bg-gray-50{
+  --tw-bg-opacity:1;
+  background-color:rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+
+.bg-gray-100{
+  --tw-bg-opacity:1;
+  background-color:rgba(243, 244, 246, var(--tw-bg-opacity));
+}
+
+.bg-yellow-50{
+  --tw-bg-opacity:1;
+  background-color:rgba(255, 251, 235, var(--tw-bg-opacity));
+}
+
+.bg-pink-700{
+  --tw-bg-opacity:1;
+  background-color:rgba(190, 24, 93, var(--tw-bg-opacity));
+}
+
+.bg-table-col{
+  --tw-bg-opacity:1;
+  background-color:rgba(251, 251, 251, var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-50:hover{
+  --tw-bg-opacity:1;
+  background-color:rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+
+.hover\:bg-table-col:hover{
+  --tw-bg-opacity:1;
+  background-color:rgba(251, 251, 251, var(--tw-bg-opacity));
+}
+
+.fill-current{
+  fill:currentColor;
 }
 
 .px-2{
@@ -791,21 +918,11 @@ video {
   padding-right:0.5rem;
 }
 
-.py-3{
-  padding-top:0.75rem;
-  padding-bottom:0.75rem;
-}
-
 .px-3{
   padding-left:0.75rem;
   padding-right:0.75rem;
 }
 
-.py-4{
-  padding-top:1rem;
-  padding-bottom:1rem;
-}
-
 .px-4{
   padding-left:1rem;
   padding-right:1rem;
@@ -816,83 +933,83 @@ video {
   padding-right:1.25rem;
 }
 
-.py-3\.5{
-  padding-top:0.875rem;
-  padding-bottom:0.875rem;
+.py-2{
+  padding-top:0.5rem;
+  padding-bottom:0.5rem;
 }
 
-.pr-4{
-  padding-right:1rem;
+.py-3{
+  padding-top:0.75rem;
+  padding-bottom:0.75rem;
 }
 
-.pl-4{
-  padding-left:1rem;
+.py-4{
+  padding-top:1rem;
+  padding-bottom:1rem;
 }
 
-.pb-5{
-  padding-bottom:1.25rem;
+.py-3\.5{
+  padding-top:0.875rem;
+  padding-bottom:0.875rem;
 }
 
-.pl-6{
-  padding-left:1.5rem;
+.pb-5{
+  padding-bottom:1.25rem;
 }
 
-.pr-8{
-  padding-right:2rem;
+.text-center{
+  text-align:center;
 }
 
-.pointer-events-none{
-  pointer-events:none;
+.text-xs{
+  font-size:0.75rem;
+  line-height:1rem;
 }
 
-.static{
-  position:static;
+.text-sm{
+  font-size:0.875rem;
+  line-height:1.25rem;
 }
 
-.absolute{
-  position:absolute;
+.text-base{
+  font-size:1rem;
+  line-height:1.5rem;
 }
 
-.relative{
-  position:relative;
+.font-normal{
+  font-weight:400;
 }
 
-.inset-y-0{
-  top:0px;
-  bottom:0px;
+.font-semibold{
+  font-weight:600;
 }
 
-.right-0{
-  right:0px;
+.font-bold{
+  font-weight:700;
 }
 
-*{
-  --tw-shadow:0 0 #0000;
+.uppercase{
+  text-transform:uppercase;
 }
 
-*{
-  --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
-  --tw-ring-offset-width:0px;
-  --tw-ring-offset-color:#fff;
-  --tw-ring-color:rgba(59, 130, 246, 0.5);
-  --tw-ring-offset-shadow:0 0 #0000;
-  --tw-ring-shadow:0 0 #0000;
+.leading-4{
+  line-height:1rem;
 }
 
-.fill-current{
-  fill:currentColor;
+.leading-7{
+  line-height:1.75rem;
 }
 
-.table-auto{
-  table-layout:auto;
+.leading-9{
+  line-height:2.25rem;
 }
 
-.text-left{
-  text-align:left;
+.leading-tight{
+  line-height:1.25;
 }
 
-.text-center{
-  text-align:center;
+.tracking-wide{
+  letter-spacing:0.025em;
 }
 
 .text-black{
@@ -925,131 +1042,116 @@ video {
   color:rgba(190, 24, 93, var(--tw-text-opacity));
 }
 
-.uppercase{
-  text-transform:uppercase;
+.opacity-50{
+  opacity:0.5;
 }
 
-.tracking-wide{
-  letter-spacing:0.025em;
+*, ::before, ::after{
+  --tw-shadow:0 0 #0000;
 }
 
-.w-2{
-  width:0.5rem;
+.focus\:outline-none:focus{
+  outline:2px solid transparent;
+  outline-offset:2px;
 }
 
-.w-3{
-  width:0.75rem;
+*, ::before, ::after{
+  --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width:0px;
+  --tw-ring-offset-color:#fff;
+  --tw-ring-color:rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow:0 0 #0000;
+  --tw-ring-shadow:0 0 #0000;
 }
 
-.w-4{
-  width:1rem;
+.filter{
+  --tw-blur:var(--tw-empty,/*!*/ /*!*/);
+  --tw-brightness:var(--tw-empty,/*!*/ /*!*/);
+  --tw-contrast:var(--tw-empty,/*!*/ /*!*/);
+  --tw-grayscale:var(--tw-empty,/*!*/ /*!*/);
+  --tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/);
+  --tw-invert:var(--tw-empty,/*!*/ /*!*/);
+  --tw-saturate:var(--tw-empty,/*!*/ /*!*/);
+  --tw-sepia:var(--tw-empty,/*!*/ /*!*/);
+  --tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/);
+  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.w-5{
-  width:1.25rem;
+.text-start{
+  text-align:start
 }
 
-.w-7{
-  width:1.75rem;
+.ps-4{
+  -webkit-padding-start:1rem;
+  padding-inline-start:1rem
 }
 
-.w-52{
-  width:13rem;
+.ps-6{
+  -webkit-padding-start:1.5rem;
+  padding-inline-start:1.5rem
 }
 
-.w-2\.5{
-  width:0.625rem;
+.pe-4{
+  -webkit-padding-end:1rem;
+  padding-inline-end:1rem
 }
 
-.w-full{
-  width:100%;
+.pe-8{
+  -webkit-padding-end:2rem;
+  padding-inline-end:2rem
 }
 
-.transform{
-  --tw-translate-x:0;
-  --tw-translate-y:0;
-  --tw-rotate:0;
-  --tw-skew-x:0;
-  --tw-skew-y:0;
-  --tw-scale-x:1;
-  --tw-scale-y:1;
-  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.ms-1{
+  -webkit-margin-start:.25rem;
+  margin-inline-start:.25rem
 }
 
-.rotate-180{
-  --tw-rotate:180deg;
+.ms-2{
+  -webkit-margin-start:.5rem;
+  margin-inline-start:.5rem
 }
 
-@-webkit-keyframes spin{
-  to{
-    transform:rotate(360deg);
-  }
+.me-2{
+  -webkit-margin-end:.5rem;
+  margin-inline-end:.5rem
 }
 
-@keyframes spin{
-  to{
-    transform:rotate(360deg);
-  }
+.end-0{
+  inset-inline-end:0
 }
 
-@-webkit-keyframes ping{
-  75%, 100%{
-    transform:scale(2);
-    opacity:0;
-  }
+.border-e{
+  border-inline-end-width:1px
 }
 
-@keyframes ping{
-  75%, 100%{
-    transform:scale(2);
-    opacity:0;
-  }
+:where(.rtt-head-row>th){
+  text-align:inherit
 }
 
-@-webkit-keyframes pulse{
-  50%{
-    opacity:.5;
-  }
+.rtt-arrow-back{
+  transform:scaleX(-1)
 }
 
-@keyframes pulse{
-  50%{
-    opacity:.5;
-  }
+.rtt-arrow-back:dir(rtl){
+  transform:none
 }
 
-@-webkit-keyframes bounce{
-  0%, 100%{
-    transform:translateY(-25%);
-    -webkit-animation-timing-function:cubic-bezier(0.8,0,1,1);
-            animation-timing-function:cubic-bezier(0.8,0,1,1);
-  }
+.rtt-arrow-next:dir(rtl){
+  transform:scaleX(-1)
+}
 
-  50%{
-    transform:none;
-    -webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);
-            animation-timing-function:cubic-bezier(0,0,0.2,1);
-  }
+@media (min-width: 640px){
 }
 
-@keyframes bounce{
-  0%, 100%{
-    transform:translateY(-25%);
-    -webkit-animation-timing-function:cubic-bezier(0.8,0,1,1);
-            animation-timing-function:cubic-bezier(0.8,0,1,1);
+@media (min-width: 768px){
+  .md\:order-none{
+    order:0;
   }
 
-  50%{
-    transform:none;
-    -webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);
-            animation-timing-function:cubic-bezier(0,0,0.2,1);
+  .md\:mt-0{
+    margin-top:0px;
   }
-}
 
-@media (min-width: 640px){
-}
-
-@media (min-width: 768px){
   .md\:flex{
     display:flex;
   }
@@ -1058,34 +1160,10 @@ video {
     display:none;
   }
 
-  .md\:flex-row{
-    flex-direction:row;
-  }
-
-  .md\:items-center{
-    align-items:center;
-  }
-
-  .md\:self-auto{
-    align-self:auto;
-  }
-
-  .md\:flex-shrink-0{
-    flex-shrink:0;
-  }
-
-  .md\:order-none{
-    order:0;
-  }
-
   .md\:h-8{
     height:2rem;
   }
 
-  .md\:mt-0{
-    margin-top:0px;
-  }
-
   .md\:w-8{
     width:2rem;
   }
@@ -1097,6 +1175,22 @@ video {
   .md\:w-auto{
     width:auto;
   }
+
+  .md\:flex-shrink-0{
+    flex-shrink:0;
+  }
+
+  .md\:flex-row{
+    flex-direction:row;
+  }
+
+  .md\:items-center{
+    align-items:center;
+  }
+
+  .md\:self-auto{
+    align-self:auto;
+  }
 }
 
 @media (min-width: 1024px){