JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div class="yellowmessage clear">
    <div class="themessage">
        <p contenteditable="true">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
    </div>
    <div class="dateandtime">11:37AM</div>
</div>
<div class="bluemessage clear">
    <div class="themessage">
        <p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare risus vulputate consequat semper. Quisque facilisis facilisis pulvinar. Maecenas aliquam, orci id rhoncus tempus, lacus tellus mattis diam, eget elementum eros dui vel leo.</p>
    </div>
    <div class="dateandtime">11:49AM</div>
</div>

CSS

.yellowmessage, .bluemessage {
    position: relative;
    margin: 5% 2%;
}
.themessage {
    font-size:1.85em;
    border-radius:20px;
    padding: 0 2%;
    max-width: 90%;
    box-shadow: inset 0 -4px rgba(0, 0, 0, 0.07), inset 0 22px 25px rgba(255, 255, 255, 0.58), 0 3px 11px rgba(0, 0, 0, 0.28);
}
.yellowmessage > .themessage {
    float: left;
    background-color: #FFF980;
}
.bluemessage > .themessage {
    float: right;
    background-color: #A7DBD8;
}
.dateandtime {
    position: absolute;
    bottom: 0;
    font-size: 80%;
}
.bluemessage > .dateandtime {
    left: 0;
}
.yellowmessage > .dateandtime {
    right: 0;
}
/* general */
 body {
    background: #eee;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: #333;
}
p {
    margin: 0.68em 0.23em;
}
* {
    box-sizing: border-box;
}
.clear:after {
    content:"";
    display: table;
    clear: both;
}
}