JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
     <input type="text" id="width" value="48%" placeholder="Width in (%)" />
      <input type="text" id="height" value="49%" placeholder="Height in (%)" />
    <input type="submit" id="colBtn" value="Add Collage To Template" />

<div style="position:relative; width:377.95px; height:755.91px; border:dashed 1px #000; display:inline-block;vertical-align:top; overflow:hidden; margin-top:10px;" id="main"></div>

    
    <div style="width:100%; height:20px;"></div>

CSS

/*
Styles related DIRECTLY with jQuery-simple-pagination
*/
.simple-pagination-page-numbers a
{
	display: block;
	float: left;
	width: 2rem;
	text-align: center;
}
a
{
	color: #216ed9;
	text-decoration: none;
}
a h1
{
	padding: 2rem;
	color: #216ed9;
	text-align: center;
}
a:hover
{
	text-decoration: underline;
}
a[class^="simple-pagination-navigation-"] + a[class^="simple-pagination-navigation-"]
{
	margin-right: 0;
}
a[class*="simple-pagination-navigation-disabled"]
{
	color: black;
	cursor: default;
}

i
{
	padding: .125rem .5rem;
	background-color: white;
	color: #ff2727;
	font-weight: normal;
}
.my-navigation:after
{
	content: "";
	display: table;
	clear: both;
}
.my-navigation div
{
	float: left;
}
.my-navigation div + div
{
	margin-left: .5rem;
}




@media screen and (max-width: 959px){
	body > div,
	header
	{
		width: 90%;
	}
}



	#tfheader{
		background:none;
	}
	#tfnewsearch{
		float:right;
		padding:5px;
	}
	.tftextinput2{
		margin: 0;
		padding: 5px 15px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#666;
		border:1px solid #0076a3; border-right:0px;
		border-top-left-radius: 5px 5px;
		border-bottom-left-radius: 5px 5px;
	}
	.tfbutton2 {
		margin: 0;
		padding: 5px 7px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:bold;
		outline: none;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		border: solid 1px #0076a3; border-right:0px;
		background: #0095cd;
		background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
		background: -moz-linear-gradient(top,  #00adee,  #0078a5);
		border-top-right-radius: 5px 5px;
		border-bottom-right-radius: 5px 5px;
	}
	.tfbutton2:hover {
		text-decoration: none;
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	}
	/* Fixes submit button height problem in Firefox...

JavaScript

$('#colBtn').live('click', function(){
	
	$('.lable').show();
	$('#reset').show();
	$('#fileField').show();
	$('#sbs').show();
    var width = $('#width').val();
	var height = $('#height').val();
	
	$('#main').append('<div class="droppable" style="width:'+width+';height:'+height+';overflow: hidden;  position:relative;float:left; margin:1%;"></div>');
	
	
	$('#layout').text($('#main').html());
	return false;
});