JSFiddle - React, Tailwind, and code Playground

by chantastic

HTML

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.1.0/normalize.css">
<body>

<!-- new challenges -->
<div class="cod-challenge-collection">
    
    <!-- sample 'new' challenge -->
    <div class="cod-challenge cod-challenge__new">
        <img class="cod-challenge--media" src="http://nicenicejpg.com/58" alt="" />
        <time class="cod-challenge--date"> Wed - Feb 5, 2013 </time>
        <h4 class="cod-challenge--title"> American Heart Month </h4>
        <span class="cod-challenge--points"> Points earned: 0 of 5 </span>
        <span class="cod-challenge--chevron"></span>
    </div>
    
    <!-- sample 'viewed' challenge -->
    <div class="cod-challenge cod-challenge__viewed">
        <img class="cod-challenge--media" src="http://nicenicejpg.com/5.0/58" alt="" />
        <time class="cod-challenge--date"> Wed - Feb 5, 2013 </time>
        <h4 class="cod-challenge--title"> Groundhog Day Challenge </h4>
        <span class="cod-challenge--points"> Points earned: 5 of 5 </span>
        <span class="cod-challenge--chevron"></span>
    </div>
</div>

<!-- challenge divider -->
<div class="cod-challenge-collection-divider">
    <h4 class="cod-challenge-collection-divider--header"> Previous Challenges </h4>
    <p class="cod-challenge-collection-divider--message"> (Points available only for 5 most recent challenges) </p>
</div>
    
<!-- previous challanges -->
<div class="cod-challenge-collection">
    
    <!-- sample 'expired' challenge -->
    <div class="cod-challenge cod-challenge__expired">
        <img class="cod-challenge--media" src="http://nicenicejpg.com/58" alt="" />
        <time class="cod-challenge--date"> Wed - Feb 5, 2013 </time>
        <h4 class="cod-challenge--title"> NFL Touchdown Dance </h4>
        <span class="cod-challenge--points"> Points earned: 0 of 5 </span>
        <span class="cod-challenge--chevron"></span>
    </div>
</div>
</body>

SCSS

$white:                   #ffffff !default;
$black:                   #000000 !default;
$lighter-gray:            #efefef !default;
$light-gray:              #bcbcbc !default;
$darker-gray:             #2d2d2d !default;
$cod-text-accent:         #faad38 !default;
$cod-challenge--bg-color: #fa451f !default;

/*
Root level resets for demo
*/
html {
    background: #d9d9d9;
    font-family: sans-serif;
    font-size: 62.5%;
}

/*
A challenge listing item suitable for displaying a challenge synopsis, engagement, and point-earnability.

.cod-challenge--new      - Gains a 'new' banner to indicate its 'newness'.
.cod-challenge--viewed   - Slightly de-emphasized to indicate that it has been viewed.
.cod-challenge--expired  - Strongly de-emphasized to indicate that it is no longer points eligable.
*/
.cod-challenge {
    position: relative;
    /* list-style: none; */
    padding: 1rem;
    background: $cod-challenge--bg-color; // fallback
    background-image: -webkit-linear-gradient(bottom, #bb3217, $cod-challenge--bg-color);
    border: 1px solid $white;
    color: $white;
    overflow: hidden;
    
    box-shadow: 0 0.1rem #979c96;
    border-radius: 0.4rem;

    
    // elements
    .cod-challenge--date {
        display: block;
        color: $cod-text-accent;
    }
    
    .cod-challenge--media {
        float: left;
        margin-right: 1rem;
        width: 58px;
        height: 58px;
        border: 1px solid $white; // REVIEW: no rem on border
        
        border-radius: 0.3rem;
        box-shadow: 0 1px 1px rgba(0,0,0,0.3); // REVIEW: no rem on box-shadow
    }
    
    .cod-challenge--title {
        font-size: 1.2rem;
        margin: 0.8em;
    }
    
    .cod-challenge--points {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        font-weight: bold;
        color: $cod-text-accent;
    }
    
    // modifiers
    &.cod-challenge__new {
        &:before {
            position: absolute;
            top: 0.5rem;
           ...