JSFiddle - React, Tailwind, and code Playground

by kgorsky

HTML

<html><body>
    <div class="body">
    <div class="header">
        <div class="system"><a href="http://louisianapa.com">LouisianaPA.com</a></div>
        <div class="title">Inbox Notification</div>
        <div class="from">From Matt Blakely <span class="date">on Mar 27, 2012 at 9:16 PM</span></div>
    </div>
    <div class="content">
        <a href="http://http://support.mb3online.com/app/#5245">Test Task 2000</a>: A note was left for you<br /><br />
        <div class="note">This is the note that was added.</div>
    </div>
    <div class="footer">
        MB3 INC.
        <br />
        <a href="http://http://support.mb3online.com/app/#5245">http://http://support.mb3online.com/app/#5245</a>
    </div>
</div>
        <div class="statement">To change your email notifications, <a href="http://support.mb3online.com/app/#USERID">click here</a>        
</body></html>

CSS

html, body { background-color:#F0F0F0; }
.body { background-color:#FFF; border:1px solid #CCC; border-bottom-color:#999; margin:30px auto 0px auto; width:90%; }
* { font-family:Helvetica, Arial, Sans-Serif; font-size:12px; }
.header, .content, .footer { padding:20px; }
.header { background-color:#F6F6F6; border-bottom:1px solid #F0F0F0; }
.system { float:right; font-size:11px; color:#999; }
.system a { font-size:11px; color:#CCC; }
.title, .title a { font-size:22px; letter-spacing:-1px; }
.date { color:#999; }
.from { font-size:1em; color:#999; }
.content { padding:20px 20px 40px 20px; }
.footer { border-top:1px solid #F0F0F0; font-size:0.9em; color:#999; }
.footer a {font-size:0.9em; color:#999; }
.note { margin-top:15px; display:block; border-left:3px solid #F6F6F6; padding:0px 0 0px 20px; margin-left:20px; color:#666; }
a { text-decoration:none; }
.statement {  margin:10px auto; width:90%; color:#999; font-size:10px; text-align:center; }
.statement a { color: #666; font-size:10px; }