JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="section1">
<table class="featuredclub" id="featuredclub-comments">
<tr>
<td width="10%" class="rating">
<div class="ratingnumber"> <span class="ratingpositiontext">
<span style="margin-top:15px">#1</span>
</span>
</div>
</td>
<td width="15%" style="margin-left:0px;margin-top:1px" class="imagetd">
<div class="ratingimage">
<div style="margin-top:6px">
<img style="height:80px;width:80px" class="featuredavatar" src="/img/featuredtmp.png" />
</div>
</div>
</td>
<td width="75%" style="text-align:left;margin-left:10px"> <span class="featuredclubname"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/name"/></span>
<span class="featuredclubaddress"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/address"/></span>
<span class="featuredclublocality"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/city"/>, <xsl:value-of select="/*/hundreds/numcomments/featuredclub/state"/> <xsl:value-of select="/*/hundreds/numcomments/featuredclub/zip"/></span>
<span class="featuredclubphone"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/phone"/></span>
</td>
</tr>
</table>
</div>
</div>
CSS
@CHARSET"ISO-8859-1";
span.value {
margin-right: -10px;
}
.viewallbutton {
display: inline;
margin-top: 2px;
margin-left: 2px;
}
h2.sectionlabel {
display: inline-block;
}
.banner {
position: relative;
background-color: #ffffff;
width: 1200px;
height: 62px;
margin: 0px auto;
padding-top: 15px;
padding-bottom: 0px;
padding-left: 25px;
padding-right: 25px;
box-sizing: border-box;
/**
border-top: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-bottom:none;
*/
border: 0px;
border-bottom: 1px solid #f0f0f0;
font: 14px/20px Arial, Helvetica, Sans-serif;
}
.banner h2 {
font: 32px/32px DinWebCond, Sans-serif;
color: #120006;
margin: 0px 0px 5px 0px;
text-transform: uppercase;
padding-top: 5px;
padding-bottom: 15px;
}
div.banner-container1 {
width: 90%;
height: 50px;
background-color: #f0f0f0;
padding-left: 25px;
}
div.banner-container2 {
width: 90%;
height: 50px;
background-color: #f0f0f0;
padding-left: 25px;
/**padding-left:25px;*/
}
div.banner-container div.innerclubbox {
background-color: #ffffff;
}
.tabledatalabel {
font: 20px/24px DinWebCond, Sans-serif;
color: #606060;
margin: 0px 0px 5px 0px;
/**text-transform:capitalize;*/
padding-top: 5px;
}
.row {
position: relative;
/**height: 750px;*/
height: 450px;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
/**padding-top:20px;*/
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
/**padding-right:25px;*/
box-sizing: border-box;
/**border: 1px solid #d0d0d0;*/
font: 14px/20px Arial, Helvetica, Sans-serif;
}
p .clear {
clear: both;
}
.section1 .featuredclub {
width: 100%;
height: 100px;
background-color: #f0f0f0;
font: 14px/20px AdlWebNorm, Sserif;
}
.section1 table.featuredclub, .section2 table.featuredclub {
...