JSFiddle - React, Tailwind, and code Playground

by Aman0js

HTML

<div id="filteredRestBody" class="row filteredRestBody">
        <div class="row">
            <div class="col-sm-4 filterThumbnails" style="background-image: url('images/indianchillythumbbck.jpg')">
            <div class="row offersRow">
                 <div class="col-sm-3">
                    <img src="images/bestoffers.png">
                  </div>
                  <div class="col-sm-9">
                      <div id="discountNum">Discount 10%</div>
                  </div>
            </div>
            <div class="row emptyRowInThumb"> </div>
            <div class="ratingsContainer row">
                 <div id="ratings" title="6/10">
                 <img src="images/ratingy.png">
                 <img src="images/ratingy.png">
                 <img src="images/ratingy.png">
                 <img src="images/ratingy.png">
                 <img src="images/ratingy.png">
                 <img src="images/ratingy.png">
                 <img src="images/ratingw.png">
                 <img src="images/ratingw.png">
                 <img src="images/ratingw.png">
                 <img src="images/ratingw.png">
             </div>
             <div id="ratingNum">6</div>
         </div>
         <div id="restaurantThumbnailsTitle row" class="restaurantThumbnailsTitle">
             <div class="row restLink">
                 <div class="col-sm-12"> Indian Chilly </div>
             </div>
             <div class="row restaurantThumbnailsTitleText">
                  <div class="col-sm-12"> a pure veg it </div>
             </div>
          </div>
        </div>
     </div>
  </div>

CSS

.filteredRestBody {
    background: none repeat scroll 0 0 rgba(120,120,120,0.4);
    border-right: 1px solid black;
    box-shadow: 0 0 0 grey;
    height: auto;
    padding: 0 0 47px 8px;
    position: relative;
    top: 30px;
    width: 260px;
}

.filterThumbnails {
    background-position: 2px -19px;
    background-repeat: repeat;
    background-size: cover;
    height: 300px;
    margin-left: 4.3%;
    width: 234px;
}

.offersRow {
    height: 60px;
}

.emptyRowInThumb {
    height: 120px;
}


.ratingsContainer {
    float: right;
    position: relative;
    top: -5px;
}

.restaurantThumbnailsTitle {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    height: 100px;
    margin-left: -14px;
    margin-right: -15px;
    position: relative;
    top: 20%;
}

.restLink {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    padding: 7px;
    position: relative;
    width: auto;
}

.restaurantThumbnailsTitleText {
    font-size: 1.7em;
    left: 23px;
    position: relative;
    text-shadow: 1px 1px 0 red;
    width: auto;
}