JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chat">
    
    <div class="bubble me"><span class="text-error">01-10 03:29</span>：Person A<br>
                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                <form action="/shop/walmart/posts/617" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
                </div>
    
                  <div class="bubble me"><span class="text-error">01-10 03:25</span>：Person A<br>
                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                <form action="/shop/walmart/posts/615" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
                </div>
    
     <div>

CSS

.chat {
        min-width: 300px;
    }
    
    .bubble{
        background-color: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 0 6px #B2B2B2;
        display: block;
        padding: 10px 18px;
        position: relative;
        vertical-align: top;
        word-break: break-all;
    }
    
    .bubble::before {
        background-color: #FFFFFF;
        content: "\00a0";
        display: block;
        height: 16px;
        position: absolute;
        top: 11px;
        transform:             rotate( 29deg ) skew( -35deg );
            -moz-transform:    rotate( 29deg ) skew( -35deg );
            -ms-transform:     rotate( 29deg ) skew( -35deg );
            -o-transform:      rotate( 29deg ) skew( -35deg );
            -webkit-transform: rotate( 29deg ) skew( -35deg );
        width:  20px;
    }
    
    .me {
        float: left;   
        margin: 5px 45px 5px 5px;
        min-width: 250px; 
        width: 100%;      
    }
    
    .me::before {
        box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
        left: -9px;           
    }
    
    .you {
        float: left;    
        margin: 5px 10px 5px 5px;
        min-width: 250px;
        width: 100%;          
    }
    
    .you::before {
        box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
        right: -9px;    
    }