JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<section>
    <h5>Policy Details</h5>
    <h3>Details of policy to be canceled</h3>
    <table style="width:100%">
        <tr><td>Purchase date:</td><td>12/Jul/2012</td></tr>
        <tr><td>Start date:</td><td>01/Nov/2011</td></tr>
        <tr><td>Within 14 days of purchase?</td><td>No</td></tr>
    </table>
    <table style="width:100%">
        <tr>
            <td>Cancellation type:</td>
            <td>
            <ul style="list-style-type:none">
                <li><label for="cancellation-normal"><input id="cancellation-normal" type="radio" name="cancellation-type" /> normal</label></li>
                <li><label for="cancellation-inception"><input id="cancellation-inception" type="radio" name="cancellation-type" /> to inception</label></li>
                <li><label for="cancellation-inception-fee"><input id="cancellation-inception-fee" type="radio" name="cancellation-type" /> to inception (inc. doc fee)</label></li>
            </ul>
            </td>
        </tr>
        <tr><td>Cancellation date:</td><td>25/Apr/2013</td></tr>
        <tr><td>Cancellation time:</td><td>When cancelled</td></tr>
    </table>
    <table style="width:100%">
        <tr><td /><td><strong>Gross</strong></td><td><strong>Doc Fee</strong></td><td><strong>£Daily</strong></td><td><strong>TOR</strong></td><td><strong>£TOR</strong></td><td><strong>Return amount</strong></td></tr>
        <tr><td>Home | Building & Contents</td><td>£167.76</td><td>£10.00</td><td>£0.46</td><td>542</td><td>£248.43</td><td>-£80.67</td></tr>
        <tr><td>Legal Expenses & ID Theft</td><td>£20.00</td><td>£0.00</td><td>£0.05</td><td>288</td><td>£15.78</td><td>£4.22</td></tr>
        <tr><td><strong>Total return amount:</strong></td><td></td><td></td><td></td><td></td><td></td><td><strong>-£76.45</strong></td></tr>
    </table>
    <h3>Cancellation fee</h3>
    <table style="width:100%">
        <tr><td>Home cancellation fee:</td><td><input value="£-80.67" /></td></tr>
        <tr><td>Total...

CSS

*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body{font-size:16px}body{background:#fff;color:#222;padding:0;margin:0;font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;font-weight:normal;font-style:normal;line-height:1;position:relative;-webkit-font-smoothing:antialiased}a:focus{outline:none}img,object,embed{max-width:100%;height:auto}object,embed{height:100%}img{-ms-interpolation-mode:bicubic}#map_canvas img,#map_canvas embed,#map_canvas object,.map_canvas img,.map_canvas embed,.map_canvas object{max-width:none !important}.left{float:left !important}.right{float:right !important}.text-left{text-align:left !important}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-justify{text-align:justify !important}.hide{display:none}img{display:inline-block}textarea{height:auto;min-height:50px}select{width:100%}.row{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.row .column,.row .columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;width:100%}.row.collapse .column,.row.collapse .columns{position:relative;padding-left:0;padding-right:0}.row .row{width:auto;margin-left:-0.9375em;margin-right:-0.9375em;margin-top:0;margin-bottom:0;max-width:none;*zoom:1}.row .row:before,.row .row:after{content:" ";display:table}.row .row:after{clear:both}.row .row.collapse{width:auto;margin:0;max-width:none;*zoom:1}.row .row.collapse:before,.row .row.collapse:after{content:" ";display:table}.row .row.collapse:after{clear:both}@media only screen{.row .column,.row .columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;float:left}.row .small-1{position:relative;width:8.33333%}.row .small-2{position:relative;width:16.66667%}.row .small-3{position:relative;width:25%}.row .small-4{position:relative;width:33.33333%}.row...