JSFiddle - React, Tailwind, and code Playground
HTML
<div class="legend-tower">
<div></div>
<div class="feature">Price</div>
<div class="feature">AIN Voltage</div>
<div class="feature">Analog Inputs</div>
<div class="feature">Resolution</div>
<div class="feature">Digital I/O</div>
<div class="feature">Logic Level</div>
<div class="feature">Analog Outputs</div>
<div class="feature">USB 2.0</div>
<div class="feature">LJTick Compatible</div>
<div class="feature">Temp Sensor</div>
<div class="feature">Ethernet</div>
<div class="feature">Wireless</div>
</div>
<div class="product">
<div class="header-holder">
<div class="header">
<div class="device-name">T7</div>
<div class="image-holder">
<img class="device-image" src="http://labjack.com/sites/default/files/imagecache/product_full/product/T7_2_large_white.JPG">
</div>
<div class="tag-line">
Performance, USB, Ethernet, Wireless
</div>
<div class="buy-button-holder">
<a class="gray-button" href="#">T7 More Info</a>
</div>
<div class="sub-products">
<div class="half">T7</div>
<div class="half">T7-Pro</div>
</div>
</div>
</div>
<div class="feature">
<div class="sub-feature">
<div class="display">$399.00</div>
</div>
<div class="sub-feature">
<div class="display">$499.00</div>
</div>
</div>
<div class="feature">+/-10V</div>
<div class="feature">14</div>
<div class="feature">
<div class="sub-feature">
<div class="display">16 bit</div>
</div>
<div class="sub-feature">
<div class="display">22 bit</div>
</div>
</div>
<div class="feature">23</div>
<div class="feature">3.3V</div>
<div class="feature">2</div>
<div class="feature">✔</div>
<div...
CSS
html
{
font-family: Tahoma,Verdana,Arial,Helvetica,"Bitstream Vera Sans",sans-serif;
font-size: 12px;
background-color: #F9F9F9;
}
.legend-tower
{
float: left;
padding-right: 20px;
width: 100px;
margin-top: 270px;
}
.product
{
float: left;
width: 130px;
padding: 0 1px 0 0px;
display: block;
}
.product .header-holder
{
width: 130px;
height: 260px;
padding-bottom: 10px;
}
.product .tag-line
{
height: 70px;
}
.product .header
{
height: 258px;
width: 130px;
margin-bottom: 50px;
position: fixed;
background-color: white;
}
.product .sub-products
{
margin: 5px 0 0 0;
color: #DC6E60;
padding: 0;
}
.product .half
{
height: 15px;
width: 45%;
float:left;
margin-right: 5%;
border-style: solid;
border-width: 0 0 3px 0;
border-color: #DC8C81;
}
.product .only
{
height: 15px;
width: 100%;
border-style: solid;
border-width: 0 0 3px 0;
border-color: #DC8C81;
}
.product .device-name
{
padding: 5px 10px 5px 10px;
text-align: center;
font-size: 21px;
background-color: #B93E2E;
color: white;
letter-spacing:2px;
border-radius: 3px 3px 0 0;
}
.product .tag-line
{
padding: 5px;
font-size: 15px;
text-align: center;
}
.product .image-holder
{
height: 100px;
overflow: hidden;
}
.product .device-image
{
width:120px;
}
.feature
{
height: 40px;
margin-bottom: 10px;
padding-left: 3px;
font-size: 13px;
}
.feature:nth-child(even)
{
color: #DC6E60;
}
.feature:nth-child(odd)
{
color: black;
}
.product .feature
{
border-style:solid;
border-width:0 0 0 1px;
}
.product .feature:nth-child(even)
{
border-color:#DC6E60;
}
.product .feature:nth-child(odd)
{
border-color:black;
}
.legend-tower .feature
{
text-align:right;
}
.sub-feature
{
margin-bottom: 10px;
width:45%;
padding-right:5%;
float:left;
}
.sub-feature .sub-product
{
...