JSFiddle - React, Tailwind, and code Playground

by zerippe

HTML

<ins id="test"></ins>

CSS

/* For recent browsers*/
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* Triggers "haslayout" for IE6/7 */
.clearfix {
    zoom:1;
}

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

li{
    position: relative;
    list-style: none;
    margin: 0 0 30px 0;
}
.thum{
    margin: 0 -162px 0 0;
    width: 162px;
    height: 100px;
    background: #eee no-repeat 50% 50%;
    background-size: cover;
    float: left;
}
.content{
    float: left;
    margin: 0 0 0 172px;
}
.description{
    margin: 0.3em 0 0 1em;
    font-size: 80%;
}
.readmore{
    display: inline-block;
    margin: 5px 0 0 0;
    padding: 5px 10px;
    font-size: 80%;
    background-color: #eee;
}
.date{
    color: #aaa;
}
.link{
    display: block;
    position: absolute;
    color: #222;
    text-decoration: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.link:hover{
    background-color: rgba(255,255,255,0.5);
}

JavaScript

var q = {};
q.id = "5129191888080362196";
q.tag = ["Android"];
q.element = "#test";
q.limit = 10;
q.imgSize = 200;

	var fetch = function (tag, callback) {
		var api = ["https://www.blogger.com/feeds/", q.id, "/posts/default/-/"];

		for (var i = 0, length = tag.length; i < length; i++) {
			api.push(encodeURI(tag[i]).replace("#", "%23") + '/');
		}

		jQuery.getJSON(api.join("") + "?callback=?", { alt: "json", "max-results": q.limit || 10 }, callback);
	};

	var adapter = function (entry) {
		return {
			title: function () {
				return entry.title.$t;
			},
			url: function () {
				for (var i = 0, length = entry.link.length, link = entry.link; i < length; i++) {
					if (link[i].rel == "alternate") {
						return link[i].href;
					}
				}
				return null;
			},
            content: function () {
                return entry.content.$t;
            },
            publish: function(){
                var date = new Date(entry.published.$t);
                return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/') + " " + date.toLocaleTimeString();
            },
			image: function (option) {
				var parsed = jQuery.parseHTML(entry.content.$t);
				var source = jQuery(parsed).find("img").first().attr("src");
				if (!source || source.indexOf("https://blogger.googleusercontent.com/tracker/") != -1) return null;
				if (source.search(/^(http|https)\:\/\/(lh\d\.(googleusercontent|ggpht)|\d\.bp\.blogspot)\.com\//i) != -1) {
					var a = source.split("/");
					if (a.length == 9) a[7] = option;
					else if (a.length == 8) a[7] = option + '/' + a[7];
					else return null;
					return a.join('/');
				}
				return source;
			}
		};
	}

	var result = [], unique = {}, tag = q.tag;

	var callback = function (data) {
		if (data.feed.entry) {
			var entries = data.feed.entry;
			for (var i = 0, length = entries.length; i < length; i++) {
				var entry = adapter(entries[i]);
				var url = entry.url();
				if (url && !(url in unique)) {
					unique[url] =...