JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>

<i class="search link icon sok" data-html="<div class='ui form'>										
                <div class='field'>
                  <div class='ui icon input'>
                  <input type='text' placeholder='Input' id='sok_tekst'>
                  <i class='search icon'></i>
                  </div>
                </div> <!-- field -->
              </div> <!-- form -->">
</i>

JavaScript

$('.sok')
  .popup({
    content: $('#sok_tekst').val('test'),
    on: 'click',
    inline: true,
    hoverable: true,
    position: 'right center',
    delay: {
      show: 300,
      hide: 300
    }
  });
  
  document.getElementById("sok_tekst").value = 'test';