JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://semantic-ui.com/build/packaged/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/noisy/1.1.1/jquery.noisy.min.js"></script>
  <div class="ui test modal">
    <i class="close icon"></i>
    <div class="header">
      Profile Picture
    </div>
    <div class="content">
        <div class="ui header">Are you sure you want to upload that?</div>
        <p>I mean it's not really the best profile photo.</p>
        <p>It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.</p>
    </div>
    <div class="actions">
      <div class="ui black button">
        Cancel
      </div>
      <div class="ui green right labeled icon button">
        Add Photo
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

<input type="text" class="test">

CSS

html, body {
    height: 100%;
}
html, body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

JavaScript

$('input.test').on('focus', function() {
    $('.test.modal')
    .modal('show')
    ;
});