JSFiddle - React, Tailwind, and code Playground

by JuanMa Garrido

HTML

<div class="suggested-courses js-suggested-courses">
     <h3>Sugerencias</h3>

    <ul>
        <li><a class="disabled" href="http://192.168.56.101/tuescuelademusica/mschool/pluginfile.php/292/mod_mplayer/content/0/GG-00027 Arpegio disminuido (4 digitaciones estáticas).mp4" id="course17" data-desc="<h2>Arpegio disminuido (4 digitaciones estáticas)</h2><p>En esta lección puedes ver 4 digitaciones del arpegio disminuido cuatríada.&nbsp;</p><p><span style=&quot;text-decoration: underline;&quot;>El arpegio disminuido es simétrico</span>, es decir, hay la misma distancia entre todas sus notas. La distancia es de una tercera menor, es decir, un tono y medio (3 trastes de la guitarra). Por lo tanto, si empiezas a tocar este arpegio en el traste 1 de la sexta cuerda (F), será el mismo que si lo empiezas en el 4, en 7, en el 10, en el 13,...</p>" data-active="0" data-jid="38" data-mid="17" ); "=" "><img src="http://192.168.56.101/tuescuelademusica/mschool/extras/aula/images/@thum-video.png " alt="titulo "><span class="titulo ">Arpegio disminuido (4 digitaciones estáticas)</span></a></li><li><a class="enabled " href="http://192.168.56.101/tuescuelademusica/mschool/pluginfile.php/253/mod_mplayer/content/0/GG-00005 Escala Mayor (1 octava).mp4 " id="course12 " data-desc="<p>Aquí te dejo las <strong>digitaciones principales de 1 octava de la escala mayor de C</strong>.</p>
            <p>Hay 3 digitaciones que empezamos con la tónica en la sexta cuerda, 3 con la tónica en la quinta, 3 con la tónica en la cuarta y una con la tónica en la tercera.</p>
            <p>Primero, trabaja por separado, lentamente, hasta memorizar cada una de las digitaciones. Posteriormente, haz el mismo ejercicio en todas las tonalidades.</p>
            <p>Como habrás visto, la tercera digitación con la tónica en la 5ª cuerda, la que empieza con el dedo 4, la he subido una octava para evitar las cuerdas al aire.&nbsp;</p>" data-name="Escala Mayor (1 octava)" data-active="1" data-mid="12" );"="">
...

CSS

.suggested-courses {
    width:800px;
    border:1px solid #ccc;
    overflow-x:scroll;
}
.suggested-courses ul {
    width:5000px;
}

.suggested-courses ul li {
    display: block;
    float:left;
    width:160px;
    height:160px;
    margin:10px;
}

.suggested-courses ul {




}