JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div class="mp_droite">
            <div class="message">
                <div class="mp_msg">
                    Message 1
                </div>
            </div>
            <div class="message">
                <div class="mp_msg mp_msg_droite">
                    Message 2
                </div>
            </div>
            <div class="message">
                <div class="mp_msg">
                    Message 3
                </div>
            </div>
            <div class="message">
                <div class="mp_msg_centre">
                    <hr />Message centré<hr />
                </div>
            </div>
            <div class="mp_msg_send">
                <textarea class="mp_msg_txtarea" placeholder="tapez votre texte ici"></textarea>
            </div>
        </div>

CSS

.mp_msg_send{
    width:600px;
    height:100px;
    position:absolute;
    bottom:0;
}
.mp_msg_txtarea{
    width:100%;
    min-height:100%;
    border-left:none;
    border-right:none;
    border-bottom:none;
    border-top:solid 1px lightgrey;
    overflow: auto;
    outline: none;
    position:absolute;
    bottom:0
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

hr {
    margin:5px;
}