JSFiddle - React, Tailwind, and code Playground

HTML

<div id="publications">
                           <div id="singlepublication">
                               
                               <div id="pubthumb">
                                   <a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px" /> </a>
                                   </div>
                                  
                               <div id="pubheading">Photography by Waruna Gomis</div>
                                  <div id="pubdesc"> 
                                      <p>This is a book about the architectural photography done by Architect Waruna Gomis </p>
                                          </div> 
                                  <div id="publink"> Link or Buy the Publication </div>
                        
                                      
                                </div>
                   
                               
                    </div>

CSS

#publications {
width: 798px;
height: 720px;
}

#singlepublication {
float: left;
height: 150px;
width: 789px;
border: #FFF thin solid;
padding: 2px;
margin-left :3px;
margin-top: 2px;
}

#pubthumb {
float: left;
width: 100px;
height: 140px;
padding: 5px 10px 5px 10px;
border-right:#CCC thin solid;
}

#pubheading {
color: red;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
padding: 15px 10px 10px 10px;
margin-left: 15px;
border-bottom: #999 thin solid;
width: 650px;
}

#pubdesc {
padding: 5px;
margin-left: 5px;
width: 789px;
}

#pubdesc p {
color: #000;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size: 10px;
}

#publink {
}