JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
 <table class="table-condensed" style="width:100%">

                      <tr>

            <td class="col-md-5">
                <div class="input-group">
                  <input type="text" name="name" class="form-control namateam" data-id="1" data-type="team_1" value="Freddy Sidauruk">
                  
                      <span class="input-group-addon">
                        <span class="badge pull-right">1</span>
                        </span>
                  </div>
            </td>
           

            <td class="col-md-2" rowspan="2" style="padding:0px; position:relative; min-width:50px;">
              <div style="border-top: 2px solid #090; border-right: 2px solid #090; width:80%; height:25%; float: left; position:absolute; top:25%;"></div>
              <div style="border-bottom: 2px solid #f00; border-right: 2px solid #f00; width:80%; height:25%; float: left; position:absolute; top:50%;"></div>
              <div style="border-top: 2px solid #090; width: 20%; margin-left: 80%; float: right; position:absolute;"></div>
            </td>

              
           

             <td class="col-md-5" rowspan="2">

      

                   <div class="input-group">
             

  <input type="text" name="name" class="form-control namateam"  data-id="9"data-type="team_1" value="Freddy Sidauruk">


                    <span class="input-group-addon">
                        <span class="badge pull-right">1</span></span>
                    </div>



              </td><td class='col-md-2' rowspan='4' style='padding:0px; position:relative; min-width:50px;'>
              <div style='border-top: 2px solid #f00; border-right: 2px solid #090; width:80%; height:25%; float: left; position:absolute; top:25%;'></div>
              <div style='border-bottom: 2px solid #090; border-right: 2px solid #f00; width:80%; height:25%; float: left; position:absolute;...