JSFiddle - React, Tailwind, and code Playground

HTML

<!-- s -->

<!-- This pure CSS method for a Star Rating System (static) uses the same image for any item. -->
<!-- Class Names: stars1, stars2, stars3, stars4, stars5, and stars6 allows from 1 to 6 stars. -->
<!-- Since margin-top is used in the Class Names for 1 to 6 stars, differnt "star rows" are then selected. -->
<!-- Reference Star Image: width:98px and height:143px and every 24px is a new "star row" -->
<!-- Reference Star Image link: http://img366.imageshack.us/img366/6441/stars.jpg -->

<div id="comicbook001" class="bookWrapper">

    <span class="bookInfo bookTitle">  Captain Marvel</span> <br />
    <span class="bookInfo bookAuthor"> Marvel Comics</span> <br />
    
    <div class="starsCSS">
        <img class="stars1" title="1 Stars" src="http://img366.imageshack.us/img366/6441/stars.jpg" alt="Star Rating Image" />
    </div>

    <span class="bookInfo bookPaper"> Paperback <span class="bookPrice">$7.99</span></span> <br />
    <span class="bookInfo bookNook">  NOOK Book <span class="bookPrice">$7.99</span></span> <br /><br />
    <span class="bookInfo">This is a pure <b>CSS</b> example for 1 of 6 Stars.<br /><b>6 Stars is from a larger image with border applied.</b></span>
          
    <img class="bookPoster" src="http://img209.imageshack.us/img209/5109/capitanmarvelv114cover1dr3.jpg" alt="bookPoster Image" />        
    
</div>


<div id="comicbook002" class="bookWrapper">

    <span class="bookInfo bookTitle"> Hitman</span> <br />
    <span class="bookInfo bookAuthor"> DC Comics</span> <br />
    
    <div class="starsCSS">
        <img class="stars2" title="2 Stars" src="http://img366.imageshack.us/img366/6441/stars.jpg" alt="Star Rating Image" />
    </div>

    <span class="bookInfo bookPaper"> Paperback <span class="bookPrice">$7.99</span></span> <br />
    <span class="bookInfo bookNook">  NOOK Book <span class="bookPrice">$7.99</span></span> <br /><br />
    <span class="bookInfo">This is a pure <b>CSS</b> example for 2 of 6 Stars.<br...

CSS

/* This class name defines the size of each "block of book" seen on the page. */
.bookWrapper{
  position:relative;
  width: 520px;  /* Set width to prevent .bookInfo from line wrapping */
  height: 250px; /* Use height with position:relative (as shown) to have books placed relative to each other. */
}

/* These class names define the optional text. The first class sets positioning of the text. */
.bookInfo{
  position: absolute;
  margin-top: 10px;
  left: 155px;
}
.bookTitle{
  background-color: black;
  color: white;
  font-weight: bold;
}
.bookAuthor{
  color: DimGray;
}
.bookFiveStar{
  background-color: Yellow;
}
.bookPaper{
  color: Purple;
}
.bookNook{
  color: Maroon;
}
.bookPrice{
  font-weight: bold;
  color: green;
}

/* This class name configures the comic book cover. */
/* Aspect-ratio is automatically preserved for height when only width is defined. */
.bookPoster{
  position: absolute; 
  top: 10px;
  left: 10px;
  width: 125px;
  border: 2px solid black;
}

/* This class name configures and positions the 6 star image block. */
.starsCSS{
  /* The width of the star block uses the entire star.jpg width */
  width: 98px;
  /* The height of the star block is LIMITED to 23px, i.e. 1 star row. */
  height: 23px;
  /* This overflow:hidden will ensure only 1 row is ever seen, when aligned properly.
  /* That said, later below different classname uses margin-top negitive offset to align. */
  overflow: hidden;
  /* The placement of the star block is relative to other elements. Adjust px here. */
  position: relative;
  top: 10px;
  left: 155px;
  /* Simple light blue border is provided for the image./
  /* Your cusom star image may be a .png with transparency so remove this setting. */
  border: 2px solid DodgerBlue;
}

/* This CSS Selector consists of classname .starsCSS that has 'img tag'. */
/* This rule will set original image width and original image height for stars.jpg file. */
.starsCSS img{
  width: 98px;
  height: 143px;
}

/* These 6 classes...