JSFiddle - React, Tailwind, and code Playground

UI Kit

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<div class="container">
    <div class="col-lg-12 premium">
        <header>
             <h1>Premium<span>Psds</span></h1>

            <p>We loce simplicity. Truly amazing and unique resources.</p><a class="ui-kit"><span>UI Kit</span></a>

        </header>
    </div>
</div>
<div class="container">
    <div class="col-lg-8 col-md-6 col-sm-12">
        <div class="container">
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="user-card card">
                    <div class="user-avatar">
                        <img src="//i.imgbox.com/abzwUr7W" class="user-bg">
                        <img src="//i.imgbox.com/adyPLwgm" class="user-pic">
                    </div>
                    <header>
                         <h1>Lanora Pohlman</h1>

                        <p>Creative Director</p>
                    </header>
                    <div class="status">Set without brought abundantly. You'll behold. Night, moveth which fruit without saw to was rule.</div>
                    <ul class="stats">
                        <li><a><strong>380</strong><span>Following</span></a>
                        </li>
                        <li><a><strong>934</strong><span>Likes</span></a>
                        </li>
                        <li><a><strong>48</strong><span>Photos</span></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="stock card">
                    <div class="stock-chart">
                        <div id="chart"></div>
                    </div>
                    <div class="current-price container">
                        <div class="info col-lg-6"><abbr>AAPL</abbr>

                            <time>Yesterday, 15:04 pm</time>
                        </div>
                        <div...

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    *zoom: 1;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.container:before, .container:after {
    content:" ";
    display: table;
}
.container:after {
    clear: both;
}
.container .row {
    *zoom: 1;
    display: block;
}
.container .row:before, .container .row:after {
    content:" ";
    display: table;
}
.container .row:after {
    clear: both;
}
body > .container {
    margin-top: 1em;
    margin-bottom: 1em;
}
@media only screen and (min-width: 641px) and (max-width: 959px) {
    body > .container {
        margin: 1em;
    }
}
@media only screen and (max-width: 640px) {
    body > .container {
        font-size: 1.1em;
        margin: 1em;
        min-width: 320px;
    }
}
@media only screen and (min-width: 1220px) {
    body > .container {
        font-size: 1.1em;
        max-width: 1220px;
    }
}
.col-lg-1 {
    display: block;
    float: left;
    margin-right: 1.20482%;
    width: 7.22892%;
}
.col-lg-1:last-child {
    margin-right: 0;
}
.col-lg-2 {
    display: block;
    float: left;
    margin-right: 1.20482%;
    width: 15.66265%;
}
.col-lg-2:last-child {
    margin-right: 0;
}
.col-lg-3 {
    display: block;
    float: left;
    margin-right: 1.20482%;
    width: 24.09639%;
}
.col-lg-3:last-child {
    margin-right: 0;
}
.col-lg-4 {
    display: block;
    float: left;
    margin-right: 1.20482%;
    width: 32.53012%;
}
.col-lg-4:last-child {
    margin-right: 0;
}
.col-lg-5 {
    display: block;
    float: left;
    margin-right: 1.20482%;
    width: 40.96386%;
}
.col-lg-5:last-child {
    margin-right: 0;
}
.col-lg-6 {
    display: block;
    float: left;
    margin-right: 1.20482%;
    width: 49.39759%;
}
.col-lg-6:last-child {
    margin-right: 0;
}
.col-lg-7 {
    display: block;
    float: left;
    margin-right: 1.20482%;
    width: 57.83133%;
}
.col-lg-7:last-child {
    margin-right:...

JavaScript

(function () {
    var $body, $value, restore;

    $('[data-hide]').on('click', function () {
        var $message, $this;

        $this = $(this);
        $message = $this.parent();
        restore($message);
        return $message.addClass('hide');
    });

    $('[data-close]').on('click', function () {
        var $message, $this;

        $this = $(this);
        $message = $this.parent();
        restore($message);
        return $message.addClass('hide');
    });

    restore = function (el) {
        return el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
            return setTimeout((function () {
                return el.removeClass('hide');
            }), 1000);
        });
    };

    $body = $('body');

    $value = $('#font-size-value');

    $('#font-size').on('change', function () {
        var value;

        value = this.value;
        $value.html("" + value + "em");
        return $body.css('font-size', "" + value + "em");
    });

}).call(this);