JSFiddle - React, Tailwind, and code Playground

by obry

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.bootstrap.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.web.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="listview" data-bind="source: pranksSource" data-template="prankTemplate"></div>

<script type="text/x-kendo-template" id="prankTemplate">
    <div class="prank-container">        
        <div class="prank-small">
            <a href="##">
                <div class="prank-container-small container-fluid fill">
                    <div class="row-fluid">
                        <div class="prank-image-small" style="background-image: url(#= data.ImageUrl #)">
                        </div>
                        <div class="hero-unit filler">
                            <p class="prank-subject">#= data.Subject #</p>
                            <p class="prank-description">#= data.Description #</p>
                            <p class="prank-preview-source prank-preview-source-small">FCXNEWSONLINE.COM</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </a>
        </div>
        <div class="container-fluid fill prank-stats">
            <div class="row-fluid">
                <div class="prank-icons-small">
                    <i class="fa fa-eye"></i>
                    <span>#= data.Views #</span>

                    &nbsp;&nbsp;

                    <i class="fa fa-share-alt"></i>
                ...

CSS

body {
    background-color:#e9eaed;
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1.35em;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

h1, h2, h3, h4 {
    font-family: 'Open Sans', 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-weight: normal;
    color: black;
}

hr {
    border-color: #dadada;
}

.jumbotron,
.well {
    background-color: white;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}

.well {
    padding: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.prank {
    float: right;
    border-radius: 6px;
    cursor: pointer;
    width: 400px;
    height: 118px;
    background: #0d747c;
    border: 1px solid #0a565c;
    display: block;
    line-height: 1.28;
    font-size: 12px;
    margin-bottom: 0;
    box-shadow: 1px 1px 4px #0d747c;
}

.prank-content {
    width: 275px;
    padding: 8px 11px;
    position: relative;
    float: left;
    color: white;
}

.prank-image-small {
    width: 116px;
    text-align: center;
    overflow: hidden;   
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.prank-image-fb { 
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    height: 116px;
    border-right: 1px solid #0a565c;
    position: relative;
    float: left;
}

.prank-button {
    background-color: #5b74a9;
    /*border-bottom-left-radius: 5px;*/
    color: #fff;
    cursor: pointer;
    margin: 10px -20px 0 -20px;
    position: relative;
    float: left;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    font-family: Tahoma, Geneva, sans-serif;
}

.prank-button-small {
    padding: 4px;
    margin: 90px -20px 0 -20px;
    float:...

JavaScript

var form = $('#prankForm');
var validator = form.kendoValidator({ validateOnBlur: true }).getKendoValidator();

var viewModel = kendo.observable({
    favorites: [1,2],
    pranksSource: new kendo.data.DataSource({
        data: [{"Id":1,"Subject":"Justin Beiber Found Dead","Description":"Just Beiber found dead in his hotel room after a show in Las Vegas. Police will not comment on the matter.","ImageUrl":"https://fbexternal-a.akamaihd.net/safe_image.php?d=AQDBVjDpX0EYz0TS\u0026w=470\u0026h=246\u0026url=https%3A%2F%2Ffbcdn-creative-a.akamaihd.net%2Fhads-ak-xpa1%2Ft45.1600-4%2F10150476_6023562630057_82357884_n.png\u0026cfs=1\u0026upscale","Slug":"justin-beiber-found-dead","Views":0,"Shares":0,"Favorites":1,"Tags":[{"Id":2,"Name":"Celebrities"}],"CreatedAt":"\/Date(1414528945260)\/"},{"Id":2,"Subject":"Yogurt","Description":"With fruits","ImageUrl":"http://cdn1.scdlifestyle.com/wp-content/uploads/2010/08/how-to-make-yogurt-1.jpg","Slug":"yogurt","Views":1,"Shares":0,"Favorites":0,"Tags":[],"CreatedAt":"\/Date(1412894623757)\/"},{"Id":3,"Subject":"Ebola Virus Found Inside Domino\u0027s Pizza","Description":"Deadly Ebola virus was found inside a pizza from the international chain Domino\u0027s Pizza in a New York, NY restaurant. Click here to read more as the story unveils.","ImageUrl":"http://www.eatcu.com/original/d5a3498cfc9e53130b5f815ef44713b7_Jet.jpg","Slug":"ebola-virus-found-inside-dominos-pizza","Views":0,"Shares":0,"Favorites":0,"Tags":[],"CreatedAt":"\/Date(1414522324187)\/"},{"Id":4,"Subject":"New Flying Firetrucks Coming to NYC","Description":"The city of New York is rumored to be getting a large order of flying firetrucks delivered to it\u0027s fire departments starting 2015. More information available at article link. ","ImageUrl":"http://www.entertainmentbuddha.com/blog/wp-content/uploads/2010/08/panning_firetruck.jpg","Slug":"new-flying-firetrucks-coming-to-nyc","Views":1,"Shares":0,"Favorites":1,"Tags":[],"CreatedAt":"\/Date(1414531523447)\/"}]
   ...