JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Toggle Effect Pure Use...

CSS

*
{
    margin:0;
    padding:0;
}
body
{
    background:#debe94;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a,a:visited
{
    text-decoration:none;
    outline:none;
    color:#a00;
}
a:hover
{
    color:#fff;
}
.kotak {
position: fixed;
bottom: 0;
right: 0;
padding: 5px;
border: 1px solid #555;
width: 350px;
background: #f4f4f4;
pointer-events: none;
opacity: 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: -webkit-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
-moz-transition: -moz-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
-o-transition: -o-transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
transition: transform .5s cubic-bezier(.3, 0, 0, 1), opacity .5s cubic-bezier(.3, 0, 0, 1);
}
/* toggle */
.toggel {
position: fixed;
display: inline-block;
width: 100px;
height: 30px;
border-radius: 10px;
margin: 1px;
background: #f9f;
top: 250px;
left: -15px;
}
.toggel a {
position: fixed;
width: 100%;
height: 30px;
text-align: center;
padding: 3px;
}
/* :target - this makes it possible to have different "states" */
#box:target .kotak, .toggel {
pointer-events: auto;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#box:target .toggel .top {
pointer-events: none;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
#box:target .toggel .bot {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
footer
{
    background:#D3A76F;
    position:fixed;
    width:100%;
    border-top:1px solid #333;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px...