JSFiddle - React, Tailwind, and code Playground

by Renan Pinto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://postimg.org/image/9utz7zzfv/"></script>
<body>
	<div class="div1">
    <table class="table table-striped table-responsive">
    <tr>
        <td>1</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>
        <td></td>
        <td>A</td>
        <td></td>
    </tr>
    <tr>
        <td>1</td>
        <td>0</td>
        <td>5</td>
    </tr>
   </table>
  </div>
  <div>
  	<img class="seta310" src='http://s9.postimg.org/9utz7zzfv/arrow.png'/>
  </div>

  <div class="div2">
  <table class="table table-striped table-responsive">
    <tr>
        <td>6</td>
        <td>5</td>
        <td>10</td>
    </tr>
    <tr>
        <td></td>
        <td>B</td>
        <td></td>
    </tr>
    <tr>
        <td>11</td>
        <td>5</td>
        <td>15</td>
    </tr>
   </table>
   </div>   

   <div >
  	<img class="seta50b" src='http://s9.postimg.org/9utz7zzfv/arrow.png' />
   </div>

   <div class="div3">
    <table class="table table-striped table-responsive">
    <tr>
        <td>6</td>
        <td>10</td>
        <td>15</td>
    </tr>
    <tr>
        <td></td>
        <td>C</td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>0</td>
        <td>15</td>
    </tr>
   </table>
   </div>
   <div >
  	<img class="seta50a" src='http://s9.postimg.org/9utz7zzfv/arrow.png' />
   </div>

 <div class="div4"> 
  <table class="table table-striped table-responsive">
    <tr>
        <td>16</td>
        <td>15</td>
        <td>30</td>
    </tr>
    <tr>
        <td></td>
        <td>D</td>
        <td></td>
    </tr>
    <tr>
        <td>16</td>
        <td>0</td>
        <td>30</td>
    </tr>
    </table>
  </div>
  <div >
  	<img class="seta145" src='http://s9.postimg.org/9utz7zzfv/arrow.png' />
  </div>

 </body>

CSS

.seta310
{
	position: relative;
	left: 100px;
	top: 150px;
	
	-ms-transform: rotate(310deg); /* IE 9 */
    -webkit-transform: rotate(310deg); /* Chrome, Safari, Opera */
	transform: rotate(310deg);
}

.seta50a
{
	position: relative;
	left: 100px;
	top: 300px;
	
	-ms-transform: rotate(50deg); /* IE 9 */
    -webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
	transform: rotate(50deg);
}

.seta50b
{
	position: relative;
	left: 350px;
	top: 120px;
	
	-ms-transform: rotate(50deg); /* IE 9 */
    -webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
	transform: rotate(50deg);
}

.seta145
{
	position: relative;
	left: 380px;
	top: 280px;
	
	-ms-transform: rotate(145deg); /* IE 9 */
    -webkit-transform: rotate(145deg); /* Chrome, Safari, Opera */
	transform: rotate(145deg);
}

.div1{
position: absolute;
top: 200px;
left: 25px;
}

.div2{
position: absolute;
top: 50px;
left: 225px;
}

.div3{
position: absolute;
top: 400px;
left: 225px;
}

.div4{
position: absolute;
top: 200px;
left: 425px;
}