JSFiddle - React, Tailwind, and code Playground

HTML

<li class="media" style="border-bottom: solid 1px; margin-bottom: 2px; padding-bottom: 2px;" id="comment_71">
          <a class="pull-left  col-sm-1" href="#">
            <img style="width:100%" src="photo.jpg" alt="Jo&atilde;o Pedro" class="media-object img-rounded">
          </a>
<div class="media-body">
     <a href=""> Jo&atilde;o Pedro </a>  
                         <div class="btn-group navbar-right">

                <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Ação 1</a></li>
                    <li><a href="#">Ação 2</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Ação 3</a></li>
                    <li><a href="#">Ação 4</a></li>
                    <li><a href="#">Ação 5</a></li>
                </ul>
                <a href="#" data-comment='#comment_71' class="trash btn btn-xs pull-right"><span class="glyphicon glyphicon-trash"></span></a>
            </div>
            <p>
            Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum 
            </p>
          </div>
</li>
    
 <li class="media" style="border-bottom: solid 1px; margin-bottom: 2px; padding-bottom: 2px;" id="comment_71">
          <a class="pull-left  col-sm-1" href="#">
            <img style="width:100%" src="photo.jpg" alt="Jo&atilde;o Pedro" class="media-object img-rounded">
          </a>
<div class="media-body">
     <a href=""> Jo&atilde;o Pedro </a>  
                         <div class="btn-group navbar-right">

                <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Ação 1</a></li>
                    <li><a href="#">Ação 2</a></li>
                    <li...