JSFiddle - React, Tailwind, and code Playground

by Marie Gérard

HTML

<div class="fenetre">
  <div class="right">
     <a href="#"><i id="close" class="icon close">X</i></a>
     <div class="tableau"></div>
  </div>
 
</div>
<button class="ouvrir">Ouvrir la fenêtre</button>

CSS

* { box-sizing: border-box;}
.fenetre { height: 200px; width: 350px; border: 2px solid gray; margin: 40px auto; padding: 10px;}

.right { text-align:right;}
a { text-decoration: none;}

.icon { font-family: sans-serif; color:#000; font-style:normal; font-size: 15px; text-align:right; padding:5px; background-color: lightgray; border-radius: 4px;}

a .icon:hover { background-color: gray; color:#FFF;}

.ouvrir { padding: 5px; background-color: lightblue; color:#000; border-radius: 5px; display:none;}

.tableau { background-color: rgba(52,52,52,0.8); width:300px; height: 155px; border-radius: 3px;}

JavaScript

function openWindow(){
	$('.fenetre').toggle();
  $('.ouvrir').toggle();
}

$('#close').on('click', function(){	openWindow(); });
$('.ouvrir').on('click', function(){ openWindow(); });


$(document).on('keypress', function(event){
	if (event.which == 99){ openWindow(); }
});