JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<article>
    <header class="clearfix">
        <div class="title">
            <h1>Your Results</h1>
            <h3>Jerry Thompson</h3>
        </div>
        <div class="brand">
            <img src="http://placekitten.com/g/193/57" />
            <h3>Well-Being Assessment</h3>
        </div>
    </header>
    
    <section>
        <h2>
            Health Risk Score
        </h2>
        <p>
            Your score is based on 9 dimensions of health that are used to gauge your overall health. The scores are 1 to 5, higher being better.
        </p>
        
        <div class="score-group">
            <span class="score large">
                2.4
            </span>
            <span class="average">
                <span>v</span>2.3 <abbr>avg</abbr>
            </span>
        </div>
        
    </section>
    
    <section>
        <h2>Top 3 Strengths</h2>
        <ul>
            <li>
                <div class="score-group">
                    <span class="score">
                        2.4
                    </span>
                    <span class="previous">
                        <span>v</span>2.3
                    </span>
                </div>
            </li>            
        </ul>
    </section>
    
</article>

JavaScript

body {
    color: #222;
}

@lightgrey: #aaa;
@darkgrey: #888;

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

article {
    margin: 0 1in 0 .7in;
}

header {
    .title {
        background: #8bc347;
        color: #fff;
        float: left;
        padding: .7in .5in .5in 1in;
    }
    
    .brand {
        float: right;
        text-align: right;
        margin-top: .5in;
    }
    
    h1 {
        margin: 0;
    }
    
    h3 {
        font-weight: 100;
        margin: 0;
    }
}

.score-group {
    .previous {
        display: block;    
    }
}

.score {
    background-color: #8bc347;
    color: #fff;
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    padding: 8px;
    border-radius: 3px;
    
    &.large {
        padding: 15px;
        font-size: 1.5em;
        border-radius: 6px;
    }
}

.previous,
.average {
    color: @lightgrey;
    font-weight: bold;
    
    abbr {
        font-weight: 100;
    }
}

.previous {
    font-size: .5em;
    margin-top: 3px;
}

.average {
    color: @lightgrey;
}



.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}