JSFiddle - React, Tailwind, and code Playground

by halnex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="listing listing-top with-feature">
        <div class="col-md-4">
            <article class="tease top-latest tease-" data-post-id="1069327">

                <a class="overlay" href="#"></a>
                <div class="tag"></div>
                <figure style="background-image:url('http://i.imgur.com/WDCTb5S.jpg');">
                    <div></div>
                </figure>
                <header>
                    <h2><a href="#">Galaxy S8 face recognition already defeated with a simple picture</a></h2>
                    <p class="excerpt">Face unlock feature once again defeated with anything resembling owner's face. </p>

                    <p class="byline" itemprop="author creator" itemscope="" itemtype="#">
                        <a itemprop="url" href="#"><span itemprop="name">Author</span></a>
                        –  <time class="date" data-time="1490974219" datetime="2017-03-31T15:30:19+00:00">3/31/2017, 6:30 PM</time>
                    </p>

                </header>
                <footer>
                    <aside class="comments-hotness ">
                        <a title="25 posters participating" class="comment-count icon-comment-bubble-up" href="#">
                            <span class="comment-count-number">31</span>
                        </a>	</aside>

                </footer>
            </article>
        </div>

        <div class="col-md-8">
            <article class="tease top-latest tease-" data-post-id="1069327">

                <a class="overlay" href="#"></a>
                <div class="tag"></div>
                <figure style="background-image:url('http://i.imgur.com/WDCTb5S.jpg');">
                    <div></div>
 ...

CSS

.listing-top {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.listing-top.with-feature article.top-latest {
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
    cursor: hand;
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: none;
    flex-flow: none;
}
.listing-top.with-feature article.top-latest .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 14;
}
.listing-top.with-feature article.top-latest .tag {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.listing-top.with-feature article.top-latest .tag {
    pointer-events: none;
    position: absolute;
    height: 36px;
    z-index: 15;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    font-size: 20px;
    font-family: economica;
    top: 15px;
    left: 0;
    display: none;
}
.listing-top.with-feature article .tag {
    pointer-events: none;
    position: absolute;
    height: 36px;
    z-index: 15;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    font-size: 20px;
    font-family: economica;
    top: 15px;
    left: 0;
    display: none;
}
.listing-top.with-feature article.top-latest figure {
    width: 100%;
    height: 0;
    padding-bottom: 55.55556%;
}
.listing-top.with-feature article.top-latest figure {
    -webkit-transition: all .17s;
    transition: all .17s;
    background-repeat: no-repeat;
    background-size: cover;
   ...