JSFiddle - React, Tailwind, and code Playground

by Sergey Aleshin

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
			<span data-color="blue" class="mattress-round blue"></span>
			<span data-color="orange" class="mattress-round orange"></span>
			<span data-color="gray" class="mattress-round gray"></span>
			<span data-color="green" class="mattress-round green"></span>
			<span data-color="sky" class="mattress-round sky"></span>

CSS

.mattress-round { width: 30px; height: 30px; margin-right: 10px; background: #000; float: left; }

JavaScript

function showMaterial(color) {
	alert('Show '+color+' material!');
}
$(document).ready(function() {
	$('.mattress-round').bind('click', function(e) {
  	showMaterial($(e.target).data('color'));
  });
});