JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<div class="exercise-content chat">
    <ul>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li class="me"><strong>tubo: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
        <li><strong>nick: </strong><span>wiadomość</span></li>
    </ul>
    <form>
        <label>Wpisz wiadomość<textarea></textarea></label>
        <button>Wyślij</button>
    </form>
</div>

CSS

div.chat {
    min-width: 410px;
}

div.chat ul {
    padding: 0;
    max-height: 290px;
    overflow-y: scroll;
}

div.chat li {
    list-style-type: none;
    border-bottom: 1px solid lavender;
    padding: 10px;
}

div.chat form textarea {
    width: 100%;
    max-width: 100%;
    paddin: 10px;
    box-sizing: border-box;
}

div.chat form button {
    float: right;
}