JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container-fluid">
    <form id="fileUpload" class="form-horizontal" enctype="multipart/form-data">
        <div class="row">
            <div class="col-md-6">
                <div class="panel crop">
                    <div class="well">
                        <input type="file" name="file" class="btn btn-default form-control" id="file" accept="image/jpg, image/png, image/jpeg" />
                        <button class="btn btn-default" id="reset">Reset</button>
                        <input id="renderButton" type="button" value="Render final image" class="btn btn-primary" />
                        <div class="share-link"></div>
                    </div>
                    <div class="well">
                        <div class="form-group">
                            <label for="imageid">Include image attribution ID</label>
                            <input type="text" onkeypress="return charsOnly(this, event)" maxlength="30" class="form-control" id="imageid" name="imageid" placeholder="Enter image ID">
                        </div>
                    </div>
                    <div class="panel-body cropper">
                        <div id="container" class="well"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 render">
                <div class="panel">
                    <div class="panel-body">
                        <div id="result_container" class="result thumbnail"></div>
                    </div>
                    <div class="well-buttons"></div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-9 col-md-offset-3">
                <div id="messages"></div>
            </div>
        </div>
    </form>
</div>

CSS

body{
    font-family: Knowledge;
  }
    #container {
      width: 540px;
      height: 600px;
    }
    .result{
      width: 50%;
    }
    #result_container{
      min-width: 600px;
    }
    .imgly-container{
      background-color: #000;
    }
    .submit{
      margin: 0 auto;
      padding: 6px 11px 6px 14px;
    }

JavaScript

$(function () {
    $(".reset, #renderButton, .render").hide();

    //ONLY SHOW RENDERED VIEW WHEN RENDER BUTTON CLICKED//
    $("#renderButton").click(function () {
        $(".render").show();
        $(".render, #result_container").show();
    })
    //RESET RENDER VIEW//
    $(".reset").click(function () {
        $(".cropper").empty();
    });
    $("#file").click(function () {
        $(".reset, #renderButton").show();
    });
});