JSFiddle - React, Tailwind, and code Playground

by rluuan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.4.0/croppie.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.4.0/croppie.js"></script>
<div id="page">
  <div id="demo-basic">
  </div>
</div>

CSS

#page {
  background: #FFF;
  padding: 20px;
  margin: 20px;
}
#demo-basic {
  width: 200px;
  height: 300px;
}

JavaScript

$(function() {
  var basic = $('#demo-basic').croppie({
    viewport: {
      width: 150,
      height: 200
    }
    
  });
  basic.croppie('bind', {
  	
    url: 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?'
  });
});