JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!DOCTYPE html>
<head lang="en">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <p>
          <div id="scanAnything">
            <button type="button" class="btn btn-primary center-block">Scan Anything</button>
          </div>
        </p>
        <p>
          <div id="clearResults">
            <button type="button" class="btn btn-primary center-block">Clear Results </button>
          </div>
        </p>
      </div>
      <div class="col-md-8">
        <div id="output-area">
          <div id="header"></div>
          <div id="results"></div>
          <div id="product"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery and Bootstrap -->
  <script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  <!--EVRYTHNG.js-->
  <script src="https://d10ka0m22z5ju5.cloudfront.net/toolkit/evrythng-js-sdk/evrythng-3.7.0.min.js"></script>

  <!--EVRYTHNG-SCAN.js-->
  <script src="https://d10ka0m22z5ju5.cloudfront.net/toolkit/evrythng-js-sdk/evrythng-scan-1.2.0.min.js"></script>

<!--   <script src="script.js"></script> -->

</body>

CSS

.boxed {
  border: 1px solid green;
}

JavaScript

var APP_API_KEY = 'YOUR_APP_API_KEY_HERE';

// Use SCANTHNG
EVT.use(EVT.Scan);

// Instantiate an EVRYTHNG Application Object
var app = new EVT.App(APP_API_KEY);

$('#scanAnything button').click(scanProduct);
$('#clearResults button').click(clearResults);

function addResults(header, results) {
  $('#output-area').attr('class', 'boxed')
  $('#header').html('<h3>' + header + '</h3><p>');
  $('#results').html(results + '<p>');
}

function addProduct(product) {
  $('#product').html(product);
}

function clearResults() {
  $('#output-area').removeAttr('class');
  $('#header').empty();
  $('#results').empty();
  $('#product').empty();
}

// Callback for when image detection returns an error
function scanError(error) {
  addResults('Scan Error', JSON.stringify(error, null, 2));
}

// Callback for when a product has been identified
function scanSuccess(res) {
  addResults('Scan Successful', JSON.stringify(res, null, 2));

  var result = res[0].results[0];
  addProduct(JSON.stringify(result.product, null, 2));
}

function scanProduct() {
  clearResults();
  app.scan({
    filter: 'method=2d&type=qr_code',
    createAnonymousUser: true
  }).then(scanSuccess)
    .catch(scanError);
}