JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main"> 
  
 <div id="show-rec-box">   
  <a class="xxx" href="#" onclick="$('div#show-rec-box').addClass('hide');">x</a>
      
  <div id="rec-wrap">
      
      <div id="rec-title">Top recommendations from greg</div>
      
      <div id="recs">
        <div class="rec">
            <div class="rec-artist">Hudson Mohawke</div>
            <div class="rec-image"></div>
            <div class="rec-msg">This is an example recommendation message.</div>
        </div>
        <div class="rec">
            <div class="rec-artist">Hudson Mohawke</div>
            <div class="rec-image"></div>
            <div class="rec-msg">This is an example recommendation message.</div>
        </div>
        <div class="rec">
            <div class="rec-artist">Hudson Mohawke</div>
            <div class="rec-image"></div>
            <div class="rec-msg">This is an example recommendation message.</div>
        </div>
      </div><!-- recs -->
        
      <div id="rec-more"><a href="www.google.com">more</a></div>
        
   </div><!-- rec-wrap -->
  
  </div><!-- show-rec-box -->

</div><!-- main -->

CSS

#main {
    border-left: solid 1px #ececec;
    border-right: solid 1px #ececec;
    width: 793px;
    float: left;

}


#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
    border-bottom: 1px solid #ececec;  
   
}

#rec-wrap {
    margin: 0px 27px 0px 28px;
    height: 100%;

}
.rec-image {
 width: 133px;
 height: 100px;
 background: #000;  
 margin: 5px auto;
 
}

.rec {
   width: 243px;
   height: 185px;
   border: 1px solid #efebeb;
   background: #faf9f9;
   float: left;
   margin-right: 1px;
}

#rec-title {
   font-family:'Helvetica W01 Light';
   font-size: 18px;
   color: #6e6d6c;
   margin-top: 14px;
   margin-bottom: 14px;
}

#rec-more {
  font-family:'Helvetica W01 Light';
  font-size: 16px;
  clear:both;
  float: right;
  margin-top: 14px;
  margin-bottom: 14px; 
}

#rec-more a {
    color: #9b9a9a;
}

.rec-artist {
   margin-top: 5px;
   text-align: center;
   font-family: 'HelveticaNeueW01-45Ligh', Helvetica, Arial, sans-serif;
   font-size: 16px;
   color: #486fb8;
}

.rec-msg {
   text-align: center;
   font-size: 14px;
   font-family:'Helvetica W01 Light';
   color: #486fb8;
}

.xxx {
    float: right;
}