JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="flexParent">
<div class="footerLeft footerHideAnimation">
ASDF ASDF ASDF
</div>
</div>

CSS

.flexParent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
}

.headerLeft, .headerRight, .footerLeft, .footerRight, .headerStretch, .headerFull, .footerStretch, .footerFull, .diagonal {

  font-size: 6vh;
  font-weight: bold;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
  margin: 0 0 0 0;
  color: #efefef;
  width:auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height:auto;
  padding-top: 1vh;
  padding-bottom: 1vh;
  align-items: center;
  --corner-radius: 6vh;
  --paddingInwards: 4vw;
  --paddingOutwards: 2vw;

}


.headerShowAnimation, .footerShowAnimation, .headerHideAnimation, .footerHideAnimation {
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.footerLeft {

  justify-content: flex-start;
  padding-right: var(--paddingInwards);
  padding-left: var(--paddingOutwards);
  position:absolute;
  bottom: 0px;
  left:0px;
  border-top-right-radius: var(--corner-radius);
  border-top: 3px solid #8c0b0b;
}


.footerHideAnimation {
    animation-name: footerHide;
}

@keyframes footerHide { 
    0% { transform: translateY(0%); } 
    100% { transform: translateY(100%); }
}