JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css">
<html>
<head>
  <title>CSS3</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9" />
</head>
<body>
  <div id="pricing">
    <h2>Pricing</h2>
    <table>
      <tr>
        <th>Licenses</th>
        <th>Monthly Cost</th>
      </tr>
      <tr>
        <td>1 - 9</td>
        <td>$10</td>
      </tr>
      <tr>
        <td>10 - 24</td>
        <td>$7</td>
      </tr>
      <tr>
        <td>25 - 49</td>
        <td>$6</td>
      </tr>
      <tr>
        <td>50 - 99</td>
        <td>$5</td>
      </tr>
      <tr>
        <td>100+</td>
        <td>Call</td>
      </tr>
    </table>
    <div id="calc">
      <div id="calc-input">
        <label>Licenses to Purchase</label>
        <input type="text" id="Quantity" name="Quantity" />
        <a href="calc-help" id="calc-help" title="What is a License?">?</a>
      </div>
      
      <div id="calc-output">
        <span class="label">Your Cost</span>
        <strong>$0</strong>
        <span class="frequency">per month</span>
      </div>
    </div>
    <button>Buy</button>
  </div>
</body>
</html>

CSS

body {
      padding: 50px;
      font-family: Helvetica, sans-serif;
    }

    #pricing {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;

      -webkit-box-shadow: 0px 3px 10px rgba(0,0,0,.4);
      -moz-box-shadow: 0px 3px 10px rgba(0,0,0,.4);
      box-shadow: 0px 3px 10px rgba(0,0,0,.4);

      width: 226px;
    }
    
    #pricing h2 {
      background: #FFFFFF; /* old browsers */
      background: -moz-linear-gradient(top, #FFFFFF 0%, #F6F6F6 7%, #E4E4E4 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(7%,#F6F6F6), color-stop(100%,#E4E4E4)); /* webkit */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E4E4E4',GradientType=0 ); /* ie */

      -webkit-border-top-left-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      -webkit-border-bottom-right-radius: 0px;
      -webkit-border-bottom-left-radius: 0px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
      -moz-border-radius-bottomright: 0px;
      -moz-border-radius-bottomleft: 0px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;

      font-size: 18px;
      font-weight: bold;
      line-height: 30px;
      color: #333;
      padding-left: 12px;
      text-shadow: 0 1px 0 #fff;
      border: solid 1px #F0F0F0;
    }
    
    #pricing table {
      border-collapse: separate;
      background: #D9D9D9;
      width: 100%;
      border-top: solid 1px #B9B9B9;
      text-shadow: 0 1px 0 rgba(255,255,255,.6);
    }
    
    #pricing table tr:nth-child(even) {
      background: #E0E0E0;
    }
    
    #pricing table th {
      color: #666;
      font-size: 11px;
      font-weight: bold;
      padding: 8px 10px;
      text-align: right;
      border: solid 1px #E6E6E6;
      border-width: 0 1px;
     ...