JSFiddle - React, Tailwind, and code Playground

by Luke Arrington

HTML

<html>
<body>

<div class="board">
<div class="contain-row1">
<div class="row row1 column1 white" div id="square1"></div><div class="row row1 column2 black" div id="square2"></div><div class="row row1 column3 white" div id="square3"></div><div class="row row1 column4 black" div id="square4"></div><div class="row row1 column5 white" div id="square5"></div><div class="row row1 column6 black" div id="square6"></div><div class="row row1 column7 white" div id="square7"></div><div class="row row1 column8 black" div id="square8"></div></div>
<div class="contain-row2">
<div class="row row2 column1 black" div id="square9"></div><div class="row row2 column2 white" div id="square10"></div><div class="row row2 column3 black" div id="square11"></div><div class="row row2 column4 white" div id="square12"></div><div class="row row2 column5 black" div id="square13"></div><div class="row row2 column6 white" div id="square14"></div><div class="row row2 column7 black" div id="square15"></div><div class="row row2 column8 white" div id="square16"></div></div>
<div class="contain-row3">
<div class="row row3 column1 white" div id="square17"></div><div class="row row3 column2 black" div id="square18"></div><div class="row row3 column3 white" div id="square19"></div><div class="row row3 column4 black" div id="square20"></div><div class="row row3 column5 white" div id="square21"></div><div class="row row3 column6 black" div id="square22"></div><div class="row row3 column7 white" div id="square23"></div><div class="row row3 column8 black" div id="square24"></div></div>
<div class="contain-row4">
<div class="row row4 column1 black" div id="square25"></div><div class="row row4 column2 white" div id="square26"></div><div class="row row4 column3 black" div id="square27"></div><div class="row row4 column4 white" div id="square28"></div><div class="row row4 column5 black" div id="square29"></div><div class="row row4 column6 white" div id="square30"></div><div class="row row4 column7 black" div...

CSS

.board {
		width: 1000px;
		height: 1000px;
	}

	.row {
		display: block;
		border: 1px solid black;
		width: 11%;
		height: 11%;
		float: left;
	}

	.white {
		background-color: white;
	}

	.black {
		background-color: black;
	}

	.red {
		background-color: red;
		height: 50px;
		width: 50px;
		border-radius: 15px;
		float: left;
	}

	.blue {
		background-color: blue;
		height: 50px;
		width: 50px;
		border-radius: 15px;
		float: left;
	}

	.contain-row2 {
		width: 100%;
		clear: both;
	}

	.contain-row3 {
		width: 100%;
		clear: both;
	}

	.contain-row4 {
		width: 100%;
		clear: both;
	}

	.contain-row5 {
		width: 100%;
		clear: both;
	}

	.contain-row6 {
		width: 100%;
		clear: both;
	}

	.contain-row7 {
		width: 100%;
		clear: both;
	}

	.contain-row8 {
		width: 100%;
		clear: both;
	}

JavaScript

$(document).ready(function(){
         $('.piece-generator-red').click(function() {
		$('.piece-house-red').append('<div class="red"></div>').find('.red').draggable();
});
     });
     $(document).ready(function(){
         $('.piece-generator-blue').click(function() {
		$('.piece-house-blue').append('<div class="blue"></div>').find('.blue').draggable();
});
     });