JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.4.js"></script>
<script id="compare-content-template" type="text/x-handlebars-template">	
<div class="compare-idea-wrapper">
    <div class="compare-idea-content">
        <div class="compare-idea-title">
            <span class="compare-span-title">{{title}}</span>
            <span class="compare-span-id">({{code}})</span>
        </div>
        <div class="compare-idea-info">
            <span>Submitted by</span>
            <span class="compare-span-submitter">{{author}}</span>
            <span>on</span>
            <span class="compare-span-date">{{date}}</span>
        </div>
        <div class="compare-idea-image"></div>
        <div class="compare-idea-tags">
             {{#each tags}}
                 <div class="compare-idea-tag">{{this}}</div>
              {{/each}}
    
        </div>
        <div class="compare-idea-body">{{description}}</div>
    </div>
    <div class="compare-idea-footer">
        <div id="select_{{id}}" class="compare-button bi-css-btn bi-btn-green">Select</div>
    </div>
</div>
</script>
<div id="sbs-body">
    <div id="sbs-content-wrapper">
        <div id="sbs-header">
            <span id="sbs-vote-label">Vote for the Best Idea</span>
            <span id="sbs-progress-count">
                <span id="sbs-current-count">3</span>
                <span>of</span> 
                <span id="sbs-remaining-count">10</span>
                <span>Remaining</span>
            </span>
        </div>
        <div id="sbs-ideas-wrapper"></div>
    </div>
</div>

CSS

.compare-idea-footer {
background: none repeat scroll 0 0 #F0F0F0;
border: 1px solid #DCDCDC;
height: 28px;
line-height: 30px;
margin-top: -2px;
padding-bottom: 10px;
padding-top: 4px;
position: relative;
text-align: center;
width: 400px;
}
.compare-idea-image {
    width:300px;
    height:300px;
    margin: auto auto;
    border: 1px solid #DCDCDC;
    background: #FAFAFA;
}
.compare-idea-tags {
    margin: 10px;
}
.compare-idea-info {
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 11px;
    color: #999999;
    font-family: arial;
}
.compare-idea-tag {
    background: #F0F0F0;
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #DCDCDC;
    padding: 0 4px 0 6px;
    display:inline-block;
    font-family: arial;
    font-size: 11px;
}
.compare-idea-content {
    overflow:auto;
}
.compare-idea-body {
    margin: 10px;
    font-family: arial;
}
.compare-idea-title {
    font-size: 24px;
    font-family: arial;
    font-weight: bold;
    color: #999999;
    margin-left:10px;
    margin-top:10px;
}
.compare-idea-content {
    height: 600px;
    border: 1px solid #DCDCDC;
    width: 400px;
}
.bi-btn-green {
background-color: #5BB75B!important;
background-image: linear-gradient(to bottom, #62C462, #51A351)!important;
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important;
color: #FFFFFF!important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;
font-weight: bold!important;
}

.bi-css-btn {
display: inline-block;
padding: 5px 14px;
margin-bottom: 0;
font-family: helvetica;
font-size: 12px;
font-weight: normal;
line-height: 12px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff,...

JavaScript

function addCompareIdea(id, title, code, author, date, tags, description)
{
	 var source   = $("#compare-content-template").html();
	 var template = Handlebars.compile(source); 
	 var data = [];
	 data.push({ 'id': id, 'title' : title, 'code': code, 'author': author, 'date': date, 'tags': tags, 'description': description});
	 $('#sbs-ideas-wrapper').append(template(data[0]));
}

var tags = ['Test 1','Test 2','Test 3'];
var description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus, tellus et cursus adipiscing, tortor dolor aliquet arcu, eget consectetur lacus lorem consectetur leo. Quisque placerat, lacus eget faucibus vulputate, felis est pharetra dolor, nec mollis felis neque non dui. Phasellus eu justo at est tempor ultricies. Quisque suscipit lorem ut sapien porttitor mollis. Curabitur pretium egestas turpis, nec tempus neque consectetur sit amet. Nunc adipiscing nunc cursus neque tincidunt feugiat. Pellentesque fermentum risus velit, vitae volutpat nibh aliquet nec. Sed vehicula sodales orci non bibendum. Curabitur adipiscing lacus dolor, nec ultrices nibh dapibus nec. Aenean sollicitudin nunc at mi laoreet, a congue ligula pellentesque. Vestibulum porta ac lectus a imperdiet. Aenean tincidunt faucibus lacinia. Donec consequat lorem ut consectetur congue. Aenean congue metus pharetra, iaculis est ac, facilisis turpis. In tempor mollis dui, sit amet aliquam tortor ornare quis. Quisque at purus vel mi facilisis iaculis. Phasellus sed odio tincidunt, varius quam eu, iaculis libero. Sed aliquet eu leo non vehicula. Curabitur consequat laoreet sem ac mattis. Aliquam a erat in elit convallis mollis."

addCompareIdea('9023092', 'Idea Title', 'D431', 'Chris Clobus', '5/15/2013', tags, description)
addCompareIdea('9023092', 'Idea Title', 'D431', 'Chris Clobus', '5/15/2013', tags, description)