JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<div id="message">
    <div class="header">
        <div class="letterhead-container">
            <table border="0" class="letterhead">
                <tr>
                    <td id="left">LabJack News</td>
                    <td id="center">Oct / Nov 2013</td>
                    <td id="right"> <a href="http://labjack.com">labjack.com</a>

                    </td>
                </tr>
            </table>
        </div>
        <div class="headline">
            <div>
                <img src="http://labjack.com/sites/default/files/2013/10/LabJack_200.png"> refines its new <span class="highlight">T7-Pro</span>

            </div>
        </div>
            <div class="subline">Multifunction DAQ - <span class="subtle-highlight">Wifi, Ethernet, USB</span></div>
        <table class="details">
            <tr>
                <td>
                    <ul>
                        <li>Analog input resolution as low as 1μV noise-free labjack.com/t7</li>
                        <li>Analog input ranges: ±10V, ±1V, ±0.1V and ±0.01V</li>
                        <li>Expand to 84 analog inputs with $150 add-on</li>
                        <li>16-bit high-speed ADC (up to 100kHz)</li>
                        <li>24-bit low-speed ADC</li>
                        <li>14 analog inputs built-in</li>
                        <li>23 digital I/O</li>
                        <li>Watchdog system</li>
                        <li>Up to 10 counters</li>
                        <li>2 analog outputs (12-bit, 0-5V)</li>
                        <li>Serial protocols: SPI, I2C, and more ...</li>
                        <li>Up to 8 PWM, quadrature, pulse width, and more ...</li>
                        <li>Thermocouples, load cells, bridges, and more ...</li>
                        <li>Industrial temperature range (-40 to +85C)</li>
                    </ul>
                </td>
                <td class="product-image-container">
                    <img class="product-image"...

CSS

#message {
    background-color: white;
}
.letterhead {
    border-collapse: collapse;
    width: 100%;
}
.letterhead-container {
    background-color: #C0C0C0;
    color: black;
    padding: 10px;
    margin: 0 0 40px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
.letterhead-container a {
    color: black;
}
.letterhead-container #left {
    text-align: left;
}
.letterhead-container #center {
    text-align: center;
}
.letterhead-container #right {
    text-align: right;
}
.product-image {
    max-width: 500px;
    width: 100%;
}
.product-image-container {
    width: 59%;
}
.headline {
    font-size: 34px;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #C0C0C0;
    margin-bottom: 5px;
    padding-left: 15px;
}
.headline img {
    height: 31px;
}
.highlight {
    font-weight: bold;
}
.subtle-highlight {
    color: #C5000B;
    font-weight: bold;
}
.subline {
    font-size: 21px;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 15px;
    margin-bottom: 20px;
}
.details {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
}
.catchphrase {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.styled-button {
    background-color: #D3D3D3;
    display: inline-block;
    padding: 7px 12px 7px;
    color: #101010;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    box-shadow: 0 1px 3px #999;
    text-decoration: none;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
}
.styled-button:hover {
    background-color: #C0C0C0;
}
.catchphrase #lead-in {
    margin-bottom: 10px;
}
.button-holder {
    margin-bottom: 40px;
}
.footer {
    background-color: #C0C0C0;
    color: #707070;
    padding: 5px;
    font-size: 11px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}