JSFiddle - React, Tailwind, and code Playground

by Blanca B

HTML

<div id="todo">
<p id="uno">Combrobando el grosor de la fuente (normal)<p>    
<p id="dos">Combrobando el grosor de la fuente (lighter)<p>        
<p id="tres">Combrobando el grosor de la fuente (normal)<p>            
<p id="cuatro">Combrobando el grosor de la fuente (bold)<p>    
<p id="cinco">Combrobando el grosor de la fuente (bolder)<p>    
<p id="seis">Combrobando el grosor de la fuente (100)<p>    
<p id="siete">Combrobando el grosor de la fuente (200)<p>    
<p id="ocho">Combrobando el grosor de la fuente (300)<p>
<p id="nueve">Combrobando el grosor de la fuente (400)<p>
<p id="diez">Combrobando el grosor de la fuente (500)<p>
<p id="once">Combrobando el grosor de la fuente (600)<p>
<p id="doce">Combrobando el grosor de la fuente (700)<p>
<p id="trece">Combrobando el grosor de la fuente (800)<p>
<p id="catorce">Combrobando el grosor de la fuente (900)<p>
</div>

CSS

@import (https://fonts.googleapis.com/css?family=Open+Sans);

#todo {   
    font-family: Open Sans;
}

#uno {
    font-weight: normal;
}

#dos {
    font-weight: lighter;
}

#tres {
    font-weight: normal;
}

#cuatro {
    font-weight: bold;
}

#cinco {
    font-weight: bolder;
}

#seis {
    font-weight: 100;
}

#siete {
    font-weight: 200;
}

#ocho {
    font-weight: 300;
}

#nueve {
    font-weight: 400;
}

#diez {
    font-weight: 500;
}

#once {
    font-weight: 600;
}

#doce {
    font-weight: 700;
}

#trece {
    font-weight: 800;
}

#catorce {
    font-weight: 900;
}