JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="dialog-modal" title="Basic modal dialog">
 <form method="get" class="search" action="http://teodora-dev.com/jason">
	<input id="s" type="text" name="s" onfocus="if(this.value==''){this.value=''};" onblur="if(this.value==''){this.value=''};" value="Search the site...">
	<input class="searchsubmit" type="submit" value="Search">
</form>
</div>

<img id="search" src="http://teodora-dev.com/jason/wp-content/themes/jason/img/Search.svg" />

CSS

html,body {
    font-size:16px;
}

JavaScript

$(function() {
    $( "#dialog-modal" ).dialog({
      autoOpen: false,
      height: 240,        
      modal: true
    });
    
    $( "#search" )
      .button()
      .click(function() {
        $( "#dialog-modal" ).dialog( "open" );
      });
});