JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="open">open the box
</a>

<div id="dialogbox" class="draggable">
    <h2>Some header here</h2>
            <h3>input:<input type="text" name="test"><br>test01<input type="text" name="test"><br>test02<input type="text" name="test">
                <a href="#" id="action">OK</a>
            </h3>
            <a href="#" id="close">&#10006;</a></div>

CSS

#open {
    width:290px;
    float:left;
    padding:5px;
    padding-top:8px;
    padding-bottom:4px;
    color:#222;
    text-decoration:underline;
    position:relative;

 }
 
 #dialogbox p {
    color:transparent;
    position:absolute;
    top:2px;
    right:5px;
    width:110px;
    font-size:14px;
 }

 #dialogbox {
    -webkit-box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
        display:block;
    width:362px;
    position:absolute;
    top:40%;
   
    display:none;
    z-index:999;
    background: rgb(217,232,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5ZThmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2QxZGNmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iI2NlZDllZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2Q5ZThmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2QxZTJlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYWU4ZTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(217,232,255,1) 0%, rgba(209,220,248,1) 20%, rgba(206,217,239,1) 56%, rgba(217,232,255,1) 70%, rgba(209,226,234,1) 80%, rgba(218,232,233,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(217,232,255,1)), color-stop(20%,rgba(209,220,248,1)),...

JavaScript

$(document).ready(function(){
 
                $("#open").click(function(){
                   
                    $("#dialogbox").fadeToggle("slow");
                    $(document).scrollTo('#dialogbox');
               
                });
            

 
                $("#close").click(function(){
                   
                    $("#dialogbox").fadeToggle("slow");
                    $(document).scrollTo('#dialogbox');
                
               
                });
    
         });        

  $(document).ready(function() {
    $(".draggable").draggable();    
  });