JSFiddle - React, Tailwind, and code Playground

HTML

<div class='row sheet-row'>
    <div class='col-sm-3'>Fruits</div>
    <div class='col-sm-3'>
      <button class='btn btn-primary' data-target='#signup-52' data-toggle='modal'>Sign up</button>
    </div>
    <div class='col-sm-3'></div>
  </div>
  <div aria-hidden='true' aria-labelledby='Sign up' class='modal fade' id='signup-52' role='dialog' tabindex='-1'>
    <div class='modal-header'>
      <button aria-hidden='true' class='close' data-dismiss='modal' type='button'>×</button>
      <h3 id='myModalLabel'>Sign up</h3>
    </div>
    <div class='modal-body'>
      <p>One fine body…</p>
    </div>
    <div class='modal-footer'>
      <button aria-hidden='true' class='btn' data-dismiss='modal'>Close</button>
      <button class='btn btn-primary'>Save changes</button>
    </div>
  </div>