JSFiddle - React, Tailwind, and code Playground

by DanielSTh

HTML

<table class="t-info" cellpadding="0" cellspacing="0">
	<tr class="titulo">
        <td class="izq" align="center"><img class="img-cover" src="http://www.argim.net/iconos/128/ringtone.mp3.png"/></td>
        <td class="derech"><b>Detalles</b><hr/>
            <ul>
                <li>Nombre:Te amo Señor</li>
                <li>Interpreta Coro Promesa Dios</li>
                <li>Genero Cumbia</li>
                <li>Album MIl Palabras de sazaon</li>
    </ul>
               <b>Opciones</b><hr/>
<a href="#" class="ver-video"><i class="fa fa-youtube-play"></i> Ver Video</a>
<a href="#" class="descargar-music"><i class="fa fa-youtube-play"></i>  Descargar</a>
<a href="#" class="ir-letra"><i class="fa fa-align-center"></i> Ver Letra</a>

        </td>
	</tr>
</table>

CSS

.titulo{  height: 25px;
  border-bottom: 1px solid #D3D3D3;}
.t-info b{color: #007ABE;
  line-height: 25px;
  font-size: 14px;
  text-transform: uppercase;}
.titulo i{color :red}
.t-info{border: 1px solid #1487C0;width: 685px;background: #ECF3FB;}
.t-info ul{margin: 0 16px;  padding: 0;}
.t-info a{color: #007ABE;
  text-decoration: none;
  display: inline-block;
  line-height: 15px;
  background: #fff;
  margin: 0 10px 10px 0;
  padding: 5px;}
.t-info hr{border: none;
  border-top: 1px solid #AABBCC;
  height: 0;
  margin-right: 10px;}
.img-cover{background: #F0F8FF;
  border: 1px solid #6C9CC4!important;
  display: block;
  margin: 4px;
  padding: 1px;
  -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
height: 150px;
  width: 150px;
  margin: 5px 0;}

.izq{width:40%;}
.derech{width:60%;}