JSFiddle - React, Tailwind, and code Playground

by Cristian Trifan

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://wp-kitten.github.io/stylesheets/main.css">
<div id="wp-projects">
</div>

JavaScript

var WpProjects = [
    {
        'title': 'STW Demo Plugin',
        'description' : 'Provides the basic template for a WordPress plugin',
        'url' : 'https://github.com/wp-kitten/stw-demo-plugin'
    }
    ,{
        'title': 'Wp Admin Submenu Page Bubble',
        'description' : 'Custom function to use when creating submenu pages where you need to display a count bubble',
        'url' : 'https://github.com/wp-kitten/wp-admin-submenu-page-bubble'
    }
    ,{
        'title': 'WPK Notifications',
        'description' : 'Provides an easy way for WordPress plugin developers to display admin notifications',
        'url' : 'https://github.com/wp-kitten/WPK-Notifications'
    }
    ,{
        'title': 'Dev',
        'description' : 'PHP, MySQL, Javascript and everything web development',
        'url' : 'https://github.com/wp-kitten/dev'
    }
];

var itemTemplate = _.template([
	'<div class="col-lg-3 col-md-4 col-xs-6 thumb">',
		'<a class="thumbnail" href="<%-url%>" title="<%-description%>">',
			'<i class="fa fa-github" style="font-size:500%"></i>',
		'</a>',
		'<div class="wp-thumb-details">',
			'<p class="wp-thumb-title"><a href="<%-url%>"><%-title%></p></a>',
			'<p class="wp-thumb-description"><%-description%></p>',
		'</div>',
	'</div>'
].join(''));


var wrapper = document.querySelector('#wp-projects');
WpProjects.forEach(function(item) {	wrapper.insertAdjacentHTML('beforeend', itemTemplate(item)); });