JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<div class="auto-hide">
  This will disappear after 3 seconds...
</div>
<div>
  Other content here
</div>

CSS

div.auto-hide {
    border-bottom: 18px solid #fff;
    height: 0px;
    overflow: show;
  -webkit-animation: seconds 0.1s forwards;
          animation: seconds 0.1s forwards;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
@-webkit-keyframes seconds {
    0% { opacity: 0; }
    50% { opacity: 1; }
   99% { opacity: 1; border-bottom-width: 18px; }
  100% { opacity: 0; border-bottom-width: 0; }
}
@keyframes seconds {
    0% { opacity: 0; }
        0% { opacity: 1; }
   99% { opacity: 1; border-bottom-width: 18px; }
  100% { opacity: 0; border-bottom-width: 0; }
}