JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class='derp' data-btn_id='btn_1'><div class='content'>Button 1</div></div><br />
<div class='derp' data-btn_id='btn_2'><div class='content'>Button 2</div></div><br />
<div class='derp' data-btn_id='btn_3'><div class='content'>Button 3</div></div><br />
<div class='derp' data-btn_id='btn_4'><div class='content'>Button 4</div></div><br />
<div class='derp' data-btn_id='btn_5'><div class='content'>Button 5</div></div><br />

<hr />

<div class='feed'>
    
</div>

CSS

.derp {
    background: #2E2E2E;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.5);
    cursor: pointer;
}
.content{ 
    color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 16px;
	font-weight:bold;   
}

JavaScript

$( document ).ready( function() {
   derp(); 
});

function derp() {
    $('.derp').click( function() {
          btn_id = $(this).attr('data-btn_id'); 
            
          $('.feed').append('<div>'+btn_id+'</div>');
    });
}