JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="cliccami" id="ciao">
    <img src="http://bobbaspace.altervista.org/images/fumetto.png" />
   <div class="dedica-overlay">
       <div class="chiudi-dedica-overlay">X</div>
        <form action=" " method="post">
 <textarea cols="30" rows="10" id="dedica" name="dedica" placeholder="Enter your dedication"></textarea>       
 
 
            <input style="float: right;" type="submit" value="Add" />
 
</form>
    </div>
</div>

CSS

.cliccami {
	border: 1px solid #0f5c8e;
	background: #035488;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	color: #fff;
    box-sizing: border-box;
    height: 30px;
    width: 30px;
    position: relative;
    cursor: pointer;
}

.dedica-overlay {
    padding: 20px;
    background: rgba(0,0,0,0.7);
    position: absolute;
    top: 40px;
    left: 0px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    display: none;
    cursor: all-scroll;
}

.chiudi-dedica-overlay {
    background: #000;
    height: 20px;
    width: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    right: -10px;
    top: -10px;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    line-height: 16px;
    cursor: pointer;
    font-family: Verdana;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid #fff;
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}

.dedica-overlay textarea {
    background: transparent;
    color: #fff;
    border: 0;
}

.dedica-overlay textarea:focus {
    outline: 0;
}

JavaScript

$( ".dedica-overlay" ).draggable();
$( "#ciao img").click(function() {
     $( ".dedica-overlay" ).fadeIn( "slow");
});

     $( ".chiudi-dedica-overlay" ).click(function() {
    
     $( ".dedica-overlay" ).fadeOut( "slow" );
  
});