JSFiddle - React, Tailwind, and code Playground

by Bob Marley

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Modal Title
  </div>
  <div class="image content">
    <div class="image">
      An image can appear on left or an icon
    </div>
    <div class="description">
      A description can appear on the right
      <br>
      <br>
      <br><br>
      <br><br>
      <br>
      <br>
      <br>
      <br>
      <br><br>
      
      <br>
      <br>
      
      <br>
      <br>
      
      <br>
      <br>
      
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button">OK</div>
  </div>
</div>

JavaScript

$(document).ready(function() {

$('.ui.modal').modal('show');

});