JSFiddle - React, Tailwind, and code Playground
HTML
<p>The Gold Star is a .gif image of a single star with transparent background.</p><br />
<div>Webpage Content</div>
<div>Webpage Content</div>
<div>Webpage Content</div>
Webpage Content<br />
Webpage Content<br />
Webpage Content<br />
<div class="starsLabel" title="Star Rating: 1 STAR">Star Rating: <span class="stars1"></span></div>
<div class="starsLabel" title="Star Rating: 2 STARS">Star Rating: <span class="stars2"></span></div>
<div class="starsLabel" title="Star Rating: 3 STARS">Star Rating: <span class="stars3"></span></div>
<div class="starsLabel" title="Star Rating: 4 STARS">Star Rating: <span class="stars4"></span></div>
<div class="starsLabel" title="Star Rating: 5 STARS">Star Rating: <span class="stars5"></span></div>
<div>Webpage Content</div>
<div>Webpage Content</div>
<div>Webpage Content</div>
Webpage Content<br />
Webpage Content<br />
Webpage Content<br />
CSS
body{
background-image:url("http://files.customize.org/thumbnails/larger/10302.jpg");
background-repeat: no-repeat;
margin:20px;
}
.starsLabel{
/* Placement of star block is relative to other elements on the webpage. */
position:relative;
}
/* This CSS Selector consists of classname .starsLabel that has 'span tag'. */
.starsLabel span{
/* The star is absolutely positioned to the .starLables div */
position:absolute;
/* The star image shown below is width:11px and height:10px; */
background-image:url(http://img68.imageshack.us/img68/1146/star1ei.gif);
/* The background-repeat property is set for horizontal repeat */
background-repeat: repeat-x;
/* The original height of the star image file */
height: 10px;
/* This vale of 80px will set the start to the left of words Star Rating: */
margin-left: 5px;
/* This will center the star graphic on the line it's on. */
top: 7px;
}
/* The five class names below allows to set from 1 to 5 stars depending on class name used. */
.stars1{
/* Width of 11px shows 1 full star's width */
width: 11px;
}
.stars2{
/* Since width of 11px shows 1 full star's width, 22px will show two stars! */
width: 22px;
}
.stars3{
width: 33px;
}
.stars4{
width: 44px;
}
.stars5{
width: 55px;
}