JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js"></script>
<div id="book001" class="bookWrapper">

    <span class="bookInfo bookTitle">  Cross Stitch</span> <br />
    <span class="bookInfo bookAuthor"> Diana Gabaldon</span> <br />

    <span class="bookFiveStar">
      <!-- Since there are five input radio buttons, there will be five stars shown. -->
      <input name="book001" type="radio" title="1 Star" class="star" />
      <input name="book001" type="radio" title="2 Star" class="star" />
      <input name="book001" type="radio" title="3 Star" class="star" checked="checked"/>
      <input name="book001" type="radio" title="4 Star" class="star" />
      <input name="book001" type="radio" title="5 Star" class="star" />
    </span> <br />

    <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">jQuery Star Rating Plugin Example:<br /><b>5 Stars are clickable</b>.</span>
          
    <img class="bookPoster" src="http://img514.imageshack.us/img514/9026/crossstitchfr7.jpg" alt="bookPoster Image" />        
    
</div>



<!-- After the above template was made, it was duplicated except for the ID and NAME tags since that needs to change -->

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

    <span class="bookInfo bookTitle">  The Lion, the Witch, and the Wardrobe</span> <br />
    <span class="bookInfo bookAuthor"> C.S.Lewis</span> <br />

    <span class="bookFiveStar">
      <input name="book002" type="radio" class="star" disabled="disabled"/>
      <input name="book002" type="radio" class="star" disabled="disabled"/>
      <input name="book002" type="radio" class="star" disabled="disabled" checked="checked"/>
      <input name="book002" type="radio" class="star" disabled="disabled"/>
      <input name="book002" type="radio" class="star"...

CSS

.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. */
}
.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;
}


.bookPoster{
  position: absolute; 
  top: 10px;
  left: 10px;
  width: 125px;  /* Aspect-ratio is automatically preserved for height. */
  border: 2px solid black;
}

/* All browsers will render font's differently which has impact on this simple example. */
.bookFiveStar{ 
  position: absolute;
  margin-top: 14px;
  left: 155px;
}



/* jQuery Star Rating Plugin DEFAULT CSS (modded with hotlinked .gif graphics) */

div.rating-cancel,div.star-rating {
float:left;
width:17px;
height:15px;
text-indent:-999em;
cursor:pointer;
display:block;
background:transparent;
overflow:hidden;
}

div.rating-cancel,div.rating-cancel a {
background:url(http://jquery-star-rating-plugin.googlecode.com/svn/trunk/delete.gif) no-repeat 0 -16px;
}

div.star-rating,div.star-rating a {
background:url(http://jquery-star-rating-plugin.googlecode.com/svn/trunk/star.gif) no-repeat 0 0;
}

div.rating-cancel a,div.star-rating a {
display:block;
width:16px;
height:100%;
background-position:0 0;
border:0;
}

div.star-rating-on a {
background-position:0 -16px!important;
}

div.star-rating-hover a {
background-position:0 -32px;
}

div.star-rating-readonly a {
cursor:default!important;
}

div.star-rating {
background:transparent!important;
overflow:hidden!important;
}

JavaScript

// jQuery Star Rating Plugin Page:  http://www.fyneworks.com/jquery/star-rating

$(document).ready(function() {

  // No additional jQuery was used for jQuery Star Rating Plugin.
  // API page: http://www.fyneworks.com/jquery/star-rating/#tab-API
    
});