JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chat">
<div class="me">
<p>看起来是不是非常赞？</p>
</div>
<div class="other" data-ts="3">
<p>我正在看各种意大利面食谱。</p>
</div>
<div class="me" data-ts="5">
<p>看起来，你的拖延症貌似上升到了一个全新境界。</p>
</div>
<div class="other" data-ts="6">
<p>这个叫“潜心钻研”好吗！</p>
</div>
<div class="me" data-ts="1">
<p>好吧……</p>
</div>
<div class="other" data-ts="2">
<p>眼见为实，你看这个：</p>
</div>
<div class="other msg-image" data-ts="0">
<div class="fake-image">这是一张图片的占位符</div>
<p class="image-title">Marc Vertri's Fettuccine with Corn Crema</p>
<p class="image-link">saveur.com</p>
</div>
</div>

CSS

html
{
    font-family: 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', 'DengXian', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 16px;
    background: white;
}

div.me
{
    clear: both;
    float: right;
    max-width: 60%;
    margin-right: 20px;
    padding: 0.4em 1em 0.6em 1em;
    border-radius: 20px;
    color: white;
    z-index: 0;
    background-color: #0b93f6;
    background-image: -webkit-linear-gradient(#51b2fb, #0b93f6);
    background-image: -moz-linear-gradient(#51b2fb, #0b93f6);
    background-image: -o-linear-gradient(#51b2fb, #0b93f6);
    background-image: linear-gradient(#51b2fb, #0b93f6);
    background-attachment: fixed;
    position: relative;
}

div.me::after
{
    content: '';
    position: absolute;
    width: 15px;
    height: 30px;
    right: -15px;
    bottom: -5px;
    border-radius: 0 0 0 15px;
    z-index: -1;
    background: white;
}

div.me::before
{
    content: '';
    position: absolute;
    width: 15px;
    height: 20px;
    right: -5px;
    bottom: 0;
    border-radius: 0 0 0 15px;
    z-index: -2;
    background-color: #0b93f6;
    background-image: -webkit-linear-gradient(#51b2fb, #0b93f6);
    background-image: -moz-linear-gradient(#51b2fb, #0b93f6);
    background-image: -o-linear-gradient(#51b2fb, #0b93f6);
    background-image: linear-gradient(#51b2fb, #0b93f6);
    background-attachment: fixed;
}

div.other
{
    clear: both;
    float: left;
    max-width: 60%;
    margin-left: 20px;
    padding: 0.4em 1em 0.6em 1em;
    border-radius: 20px;
    color: black;
    z-index: 0;
    background-color: #e5e5e5;
    position: relative;
}

div.other::after
{
    content: '';
    position: absolute;
    width: 15px;
    height: 30px;
    left: -15px;
    bottom: -5px;
    border-radius: 0 0 15px 0;
    z-index: -1;
    background: white;
}

div.other::before
{
    content: '';
    position: absolute;
    width: 15px;
    height: 20px;
    left: -5px;
    bottom: 0;
    border-radius: 0 0 15px 0;
   ...