JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

CSS

.block > * {
    vertical-align: middle;
}
.block > .progress {
    margin-bottom: 0px;
    display: inline-block;
    width: -webkit-calc(100% - 51px);
}

JavaScript

var a = new Entry(0);


function Entry(id){
	var block = $("<div>").addClass("block").appendTo("body"),
		progressBarWrapper = $("<div>").addClass("progress progress-striped active").appendTo(block),
		progressBar = $("<div>").addClass("progress-bar").css("width", "100%").attr("role", "progressbar").appendTo(progressBarWrapper),
		btnGroup = $("<div>").addClass("btn-group").appendTo(block),
		deleteBtn = $("<button>").addClass("btn btn-default btn-xs").attr({title: "Delete", type: "button"}).html(gly("trash")).appendTo(btnGroup),
		repeatBtn = $("<button>").addClass("btn btn-default btn-xs").attr({title: "Toggle Repeat", type: "button"}).html(gly("repeat")).appendTo(btnGroup),
		message = $("<div>").addClass("message").appendTo(block);

	return {
		node: block,
		remove: function(){}
	}
}
function gly(icon){
	return $("<span>").addClass("glyphicon glyphicon-" + icon + " ")[0].outerHTML;
}