JSFiddle - React, Tailwind, and code Playground

by zerippe

HTML

<style>
#headline .item{
    position: relative;
    width: 420px;
    height: 180px;
    overflow: hidden;
    float: left;
    box-shadow: 0 0 4px rgba(0,0,0,.5);
    border: 1px solid #333;
    margin: 10px
}
#headline .image{
    width: 100%;
    height: 100%;
    background: #eee no-repeat 50% 50%;
    background-size: cover;
}
#headline .link{
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#headline .title, .date, .label{
    padding: 8px 1em;
    background-color: rgba(0,0,0,.6);
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
}
#headline .title{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
#headline .date{
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
}
</style>
<div id="headline"></div>
<script>
var headline = function(data)
{
    var entry_itrator = function (entries, callback) {
        for (var i = 0, length = entries.length; i < length; i++) {
            callback(entries[i]);
        }
    }

    var entry_data_adapter = function (entry) {
        return {
            title: entry.title.$t,
            url: (function () {
                for (var i = 0; i < entry.link.length; i++) {
                    if (entry.link[i].rel == "alternate") {
                        return entry.link[i].href;
                    }
                }
                return null;
            })(),
            content: entry.content.$t,
            categories: (function () {
                var categories = [];
                for (var i = 0; i < entry.category.length; i++) {
                    categories.push(entry.category[i].term);
                }
                return categories.length == 0 ? null : categories;
            })(),
            published: (function(){
                var date = new Date(entry.published.$t);
                return [date.getFullYear(), date.getMonth() + 1,...

CSS

*{
    margin:0;
    padding:0;
    font-family: "ヒラギノ角ゴ Pro W3",Osaka,"メイリオ",Meiryo,Arial,Helvetica;
    box-sizing: border-box;
}