JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chat-wrapper">        
        <label for="show_chat">Покажите мне чат!</label>
        <div class="chat-content">
            <div class="line"> <span class="sender">Леша</span>: Привет, солнце!</div>
            <div class="line"> <span class="sender">Настя</span>: Чем занят?</div>
            <div class="line"> <span class="sender">Леша</span>: Да вот, решил проверить, смогу ли сверстать простенький чат. Успех! :)</div>
            <div class="line"> <span class="sender">Настя</span>: И еще одно достаточно длинное сообщение для меня для тестирования верстки и расположения самого чата на сайте.</div>
        </div>
    </div>

CSS

body {
    margin: 0;
}
.content {
    background-color: #aaeeff;
    width: 100%;    
    transition: width 0.5s;
    -o-transition: width 0.5s;
    -moz-transition: width 0.5s;
    -webkit-transition: width 0.5s;
}
.chat-wrapper, .chat-wrapper label {
    display: table-cell;
    width: 194px;
}
.chat-wrapper {
    background-color: #5577aa;
    bottom: 0;
    color: #ffffff;
    display: table;
    font-size: 16px;
    max-width: 100%;
    padding: 0 3px 3px;
    position: fixed;
    right: 0;
}
.chat-wrapper label {
    display: block;
    padding: 10px 0;
    position: relative;
    text-indent: 10px;
}
#show_chat {
    display: none;
    width: 0;
}
#show_chat ~ .chat-wrapper label::after, #show_chat:checked ~ .chat-wrapper label::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content:"";
    display: block;
    height: 0;
    position: absolute;
    top: 15px;
    right: 10px;
    width: 0;    
}
#show_chat ~ .chat-wrapper label::after {
    border-bottom: 10px solid #ffffff;
}
#show_chat:checked ~ .chat-wrapper label::after {
    border-top: 10px solid #ffffff;
    border-bottom: 0;
}
#show_chat:checked ~ .content {    
    width: calc(100% - 200px);
    transition: width 0.5s;
    -o-transition: width 0.5s;
    -moz-transition: width 0.5s;
    -webkit-transition: width 0.5s;
}
.chat-content {
    background: #fefaee;
    color: #000000;
    max-height: 150px;
    overflow-y: scroll;
    padding: 0 5px;
}
#show_chat, .chat-content {    
    font-size: 12px;
    height: 0;
    transition: height 0.5s;
    -o-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -webkit-transition: height 0.5s;
}
#show_chat:checked ~ .chat-wrapper .chat-content {
    height: 150px;
    transition: height 0.5s;
    -o-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -webkit-transition: height 0.5s;
}
.line {
    padding: 5px 0;
}
.line:nth-of-type(odd) .sender {
    color: #9900ff;
}
.line:nth-of-type(even)...