JSFiddle - React, Tailwind, and code Playground

by Nicolas AGUENOT

HTML

<div class="mon-super-container">

<span class="membre">
Espace membre
</span>
<span id="slider" class="transition">
<input type="search" placeholder="ma super recherche" value="" />
</span>
<button>slide</button>
</div>

CSS

.mon-super-container{
  border:1px solid #ffcc00;
  width:400px;
  overflow:hidden;
}

#slider{
    background:blue;
    width:150px;
    position:relative;
    right:-520px;
    display:inline-block;
    z-index:1;
    
}
.membre{
  display:inline-block;
  width:150px;
}
button{
  position:relative;
    display:inline-block;
  z-index:10;
    width:50px;
}
.open{
    right:0px !important;
    
}
.transition{
    
  -webkit-transition: right 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: right 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: right 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: right 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

}

JavaScript

var open = false;

$('button').on('click', function(){
		if(open == false){
    		open = true;
         $('#slider').toggleClass('open');
    }else{
    		//validate your form
        alert("validate your form");
    }
   

})