JSFiddle - React, Tailwind, and code Playground

by ryan Couch

HTML

<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 <title>LEFT Sandbox</title>

</head>

<body class="transition-in crm dimmable dimmed scrolling" data-mode="springboard" style="height: 1294px;">

 <br> &nbsp;&nbsp;
 <div class="ui button green common-example">
  <a href="#open-example-modal">click to view modal</a>
 </div>
 <br>

 <!--
  <div dynamicContent="ModalContent.html" class="ui modal" id="example-modal-1518017746969">
    This Content Will be replaced!
  </div>
  -->

 <div class="ui dimmer modals page transition visible active" style="display: block !important;">
  <div class="ui modal scrolling transition visible active" id="example-modal-1518017746969" style="top: 0px; display: block !important;">
   <div class="ui large modal scrolling transition visible active" data-target="crm-add-contact" style="top: 0px; display: block !important;">
    <i class="close icon"></i>
    <div class="header">Contact Details</div>
    <hr>

    <div class="ui hidden icon message" style="width: 1020px;height: 70px;">
     <i class="inbox icon"></i>
     <i class="close icon"></i>
     <div class="content">
      <div class="header">
       Contact Saved
      </div>
      <p>You have saved the contact ${FULL NAME}</p>
     </div>
    </div>

    <div class="content">
     <div class="ui three column grid form">
      <!-- .column -->
      <div class="column">
       <div class="field super-label"><input type="text" name="" placeholder=""><label for="undefined">Full Name*</label></div>
       <div class="field super-label"><input type="text" name="" placeholder=""><label for="undefined">Title</label></div>
       <div class="field super-label">
        <div class="ui fluid search selection dropdown">
         <select name="country">
              <option value=""></option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
...

CSS

/*! CSS Used from: Embedded */
svg:not(:root).svg-inline--fa{overflow:visible;}
.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;}
.svg-inline--fa.fa-lg{vertical-align:-.225em;}
.svg-inline--fa.fa-w-16{width:1em;}
.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em;}
/*! CSS Used from: http://localhost/LeftSandbox/css/external/semantic-ui-2.2.13.min.css */
*,:after,:before{box-sizing:inherit;}
html{box-sizing:border-box;}
input[type=text]{-webkit-appearance:none;-moz-appearance:none;}
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
hr{box-sizing:content-box;height:0;overflow:visible;}
a{background-color:transparent;-webkit-text-decoration-skip:objects;}
svg:not(:root){overflow:hidden;}
button,input,select{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;}
button,input{overflow:visible;}
button,select{text-transform:none;}
button{-webkit-appearance:button;}
button::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring{outline:1px dotted ButtonText;}
body,html{height:100%;}
html{font-size:14px;}
body{margin:0;padding:0;overflow-x:hidden;min-width:320px;background:#fff;font-family:'Source Sans Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.4285em;color:rgba(0,0,0,.87);font-smoothing:antialiased;}
p{margin:0 0...

JavaScript

$('a[href="#open-example-modal"]').on("click", function(e) {
 //$("#example-modal-1518017746969").modal("show");
 alert("todo: show modal");
 return false;
});

$("#DoHide").on("click", function(e) {
 alert("todo: Hide the save message");
 return false;
});

$("#DoShow").on("click", function(e) {
 alert("todo: Show the save message");
 return false;
});

$(".message .close").on("click", function() {
 $(this)
  .closest(".message")
  .transition("fade");
 alert("todo: close the save message");
});

$(".icon .only .primary .button").on("click", function() {
 alert("todo: show the save message");
});