JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<link rel="stylesheet" href="http://cdn.thejameskyle.com/normalize.css">
<meta name="viewport" content="width=device-width">

<header class="image">
    <a href="http://coachup.com/" target="_blank">
    <img height="60" width="152" alt="CoachUp"...

SCSS

/** COLORS */
    $dark: #252527;
    $white: #FEFEFE;

/** FONTS */
    $font-size: 14px;
    $line-height: 21px;
    $font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    $font-weight: 300;

@mixin font {
    font-family: $font-family;
    font-weight: $font-weight;
    font-size: 1em;
    line-height: $line-height/$font-size*1em;
}


html {font-size: $font-size/16px*100%}

/* CSS RULES */

body {
    background: #f8f9fa;
    color: $dark;
    @include font;
    
    min-width: 300px;
    width: auto;
    max-width: 1000px;
    
    margin: 0 auto;
    padding: 11px
}

header {
    position: relative;
    padding: 20px 32px 29px;
    
    background: $dark;
    color: $white;
}

header * {
    position: relative;
    display: inline;
    display: inline-block;
    vertical-align: -9px;
}

header img {
    margin: -15px 10px 0 0;
}

header h2 {
    font-weight: bold;
    margin: 0;
}

div.box-effect {
    border: #f8f9fa 15px solid;
    border-top-color: #656768;
}

article {
    position: relative;
    padding: 16px;
    
    background: $white;
    border: #edeeef 1px solid;
    border-top: none;
}

article aside {
    width: auto;
    margin: 0 -17px;
    
    background: #e3e4e5;
    border: #f8f9fa 17px solid;
    border-top-color: #dddedf;
    border-bottom-color: #edeeef;
}

article aside img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: -8px -12px 0;
    padding: 11px;
    border: 1px solid #DDD;
    
    background: #f1f2f3;
}