JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="dark"></div>
<div class="light"></div>

CSS

body{
    background:#ececec;
    text-align:center
}

div.dark {
    position: absolute;
    width: 100px;
    height: 90px;
    cursor:pointer;
    
    top:100px;
    left:100px;
}
div.dark:before,
div.dark:after {
    position: absolute;
    content: "";
    left: 90px;
    top: 20px;
    width: 50px;
    height: 80px;
   
    background:#e4e4e4;
    
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
div.dark:after {
    left: 40px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}


div.light{
    position: absolute;
    width: 100px;
    height: 90px;
    cursor:pointer;
    
    top:100px;
    left:100px;
    opacity:0;
    
    
  -webkit-transition: opacity 0.5s ease-in-out; 
     -moz-transition: opacity 0.5s ease-in-out; 
      -ms-transition: opacity 0.5s ease-in-out; 
       -o-transition: opacity 0.5s ease-in-out; 
          transition: opacity 0.5s ease-in-out;

}
div.light:before,
div.light:after {
    position: absolute;
    content: "";
    left: 90px;
    top: 20px;
    width: 50px;
    height: 80px;
   
    background: #e4e4e4;
    
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
       ...

JavaScript

$('div.light').on('click', function(){
    if($(this).css('opacity')=='0'){
       $(this).css('opacity', 1);
    } else {
        $(this).css('opacity', 0);        
    }       
});