JSFiddle - React, Tailwind, and code Playground

by Drath

CSS

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 1;
        height: auto;
        padding: 4px;
        margin: 3px 0 0 3px;
    }
    98% {
        opacity: 1;
        height: auto;
        padding: 4px;
        margin: 3px 0 0 3px;
    }
    100% {
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0;
    }
}

body {
  background: transparent;
  margin: 0px auto;
}

::-webkit-scrollbar {
  visibility: hidden;
}

#chat_box {
  background: none !important;
}

.chat_line {
  text-shadow: 0 0 1px #000, 1px 1px 0 #000;
  background: rgba(0, 0, 0, 0.7);
  font-size: 18px;
  line-height: 18px;
  -webkit-animation: fadeAnimation 120s;
  -webkit-animation-fill-mode: forwards;
  overflow: hidden;
  padding: 4px;
  border-radius: 3px;
  margin: 3px 0 0 3px;
  float: left; 
  clear: left;
}

.chat_line .nick {

}

.chat_line .message {
  word-break: break-word;
}