JSFiddle - React, Tailwind, and code Playground

by c wf

HTML

<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
			<div class="row">
				<div class="col-md-8">
					<div class="img-box">
						<div class="thumb-box"></div>
						<div class="spinner"></div>
					</div>
					<div class="action">
						<div id="file" class="new-contentarea tc">
							<a href="javascript:void(0)" class="upload-img">
								<label for="upload-file">上传图像</label>
							</a>
							<input type="file" class="" name="upload-file" id="upload-file">
						</div>
						<input type="button" id="btnCrop" class="btn-crop" value="裁切" />
						<input type="button" id="btnZoomIn" class="btn-zoom-in" value="-" />
						<input type="button" id="btnZoomOut" class="btn-zoom-out" value="+" />
					</div>
				</div>
				<div class="col-md-4">
					<div class="cropped"></div>
				</div>
			</div>
		</div>

CSS

/**
 * rest css
 */

*{
	margin: 0;
	padding: 0;
}
*:after,
*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.clearfix:before,
.clearfix:after,
body:before,
row:before,
row:after{
	content: "";
	display: table;
}
ul>li{
	list-style: none;
}
body{
	font-family: "微软雅黑";,"Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
	font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
html,body{
	width: 100%;
	height: 100%;
}
a{
	color: rgba(255,255,255,0.6);
	outline: none;
	text-decoration: none;
	-webkit-transition: 0.2s;
	transition: 0.2s;
}
a:hover,
a:focus{
	color: #74777b;
	text-decoration: none;
}


/**
 * .container 响应式布局
 * .container-fluid 流式布局
 * 
 */

.container{
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
@media(min-width: 768px) {
	.container{
		width: 750px;
	}
}
@media(min-width: 922px) {
	.container{
		width: 970px;
	}
}
@media(min-width: 1200px) {
	.container{
		width: 1170px;
	}	
}

.container-fluid{
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.row{
	margin-right: -15px;
	margin-left: -15px;
	display: inline-flex;
	display: -webkit-box; /*定义老版本flex*/
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;/*定义flex*/

}

.col-xs-1, 
.col-sm-1, 
.col-md-1, 
.col-lg-1, 
.col-xs-2, 
.col-sm-2, 
.col-md-2, 
.col-lg-2, 
.col-xs-3, 
.col-sm-3, 
.col-md-3, 
.col-lg-3, 
.col-xs-4, 
.col-sm-4, 
.col-md-4, 
.col-lg-4, 
.col-xs-5, 
.col-sm-5, 
.col-md-5, 
.col-lg-5, 
.col-xs-6, 
.col-sm-6, 
.col-md-6, 
.col-lg-6, 
.col-xs-7, 
.col-sm-7, 
.col-md-7, 
.col-lg-7, 
.col-xs-8, 
.col-sm-8, 
.col-md-8, 
.col-lg-8, 
.col-xs-9, 
.col-sm-9, 
.col-md-9, 
.col-lg-9, 
.col-xs-10, 
.col-sm-10, 
.col-md-10, 
.col-lg-10, 
.col-xs-11, 
.col-sm-11, 
.col-md-11, 
.col-lg-11, 
.col-xs-12, 
.col-sm-12, 
.col-md-12, 
.col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right:...

JavaScript

$(window).load(function() {
				var options = {
					thumbBox: '.thumb-box',
					spinner: '.spinner',
					imgSrc: './img/koala.jpg'
				}
				var cropper = $('.img-box').cropbox(options);
				$('#upload-file').on('change', function() {
					var reader = new FileReader();
					reader.onload = function(e) {
						options.imgSrc = e.target.result;
						cropper = $('.img-box').cropbox(options);
					}
					reader.readAsDataURL(this.files[0]);
					this.files = [];
				})
				$('#btnCrop').on('click', function() {
					var img = cropper.getDataURL();
					$('.cropped').html('');
					$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
					$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
					$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
				})
				$('#btnZoomIn').on('click', function() {
					cropper.zoomIn();
				})
				$('#btnZoomOut').on('click', function() {
					cropper.zoomOut();
				})
			});