JSFiddle - React, Tailwind, and code Playground

by Phellipe Lins

HTML

<div class="container">
              <div>De sua nota:</div>
              	<div class="notas-container">
	              	<div class="nota nota1"></div>
	              	<div class="nota nota2"></div>
	              	<div class="nota nota3"></div>
	              	<div class="nota nota4"></div>
	              	<div class="nota nota5"></div>
	              	<div class="nota nota6"></div>
	              	<div class="nota nota7"></div>
	              	<div class="nota nota8"></div>
	              	<div class="nota nota9"></div>
              		<div class="nota nota10"></div>
              	</div>              
          </div>

CSS

.container {
    width: 300px;
    height: 100px;
}

.notas-container {
    width: 250px;
    height:30px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}
    .nota {
        display: inline-block;
        margin-right: -2px;
        height:30px;
        width:20px;
    }

    .nota1{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) 0px 0px;
    }
    .nota2{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -20px 0px;
    }
    .nota3{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -40px 0px;
    }
    .nota4{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -60px 0px;
    }
    .nota5{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -80px 0px;
    }
    .nota6{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -100px 0px;
    }
    .nota7{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -120px 0px;
    }
    .nota8{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -140px 0px;
    }
    .nota9{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -160px 0px;
    }
    .nota10{
        background:url(http://imageshack.com/a/img837/1949/ms8w.jpg) -180px 0px;
    }