JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id=card>
    <h1>HTML5 is &hearts; CSS3 is Life</h1>
    <section>
        <input type=radio name=menu id=menu1 checked hidden/>
        <input type=radio name=menu id=menu2 hidden/>
        <input type=radio name=menu id=menu3 hidden/>
        <menu>
            <li><label for=menu1>HTML5</label></li> 
            <li><label for=menu2>CSS3</label></li>
            <li><label for=menu3>ECMAScript</label></li>
        </menu>
        
        <article class=menu1>HTML5</article>
        <article class=menu2>CSS3</article>
        <article class=menu3>ECMAScript</article>
    </section>
</div>

CSS

*{box-sizing: border-box;padding:0;margin:0;-webkit-user-select: none;}
:root{background:#ccc}
#card{
    width:480px;
    height:320px;
    border:1px solid #ccc;
    margin:60px auto;
    position:relative;
}
.touchPulse{
    background:red;
    width:32px;
    height:32px;
    border-radius:50%;
    position:absolute;
    margin:-18px 0 0 -18px;
    transform: scale(0,0);
    -webkit-animation: scale .3s ease-in-out
}

@-webkit-keyframes scale{
    from{transform: scale(0,0);opacity:1}
    to{transform: scale(4,4);opacity:0}
}

h1{
    display: block;
    position: relative;
    height: 64px;
    font-size: 1.3em;
    background-color: #CFD8DC;
    color:#333;
    line-height:64px;
    text-indent:20px;
    font-weight: 100;
}
section{
    position:relative;
    width:100%;
    height:calc(100% - 64px);
    background:#f1f1f1
}
label{cursor:pointer;color:currentColor}
li{list-style:none}
menu li{
    float:left;
    width:33.333333%;
    padding: 14px 0;
    text-align:center;
    background:white;
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 0 0 0 #3e50b4;
    transition:box-shadow .2s ease,color 0.4s 0.3s ease
}
article{
    display:none;
    position:absolute;
    top:46px;
    bottom:0;
    left:0;
    width:100%;
    background-color: #eee;
    padding:10px;
}
#menu1:checked ~ article.menu1,
#menu2:checked ~ article.menu2,
#menu3:checked ~ article.menu3
{display:block}
#menu1:checked ~ menu li:nth-child(1),
#menu2:checked ~ menu li:nth-child(2),
#menu3:checked ~ menu li:nth-child(3)
{color:#3e50b4;box-shadow:inset 0 -4px 0 0 #3e50b4}

JavaScript

function touchPulse(e){
    var touchPulse = $("<div class='touchPulse'><div></div></div>"),
        posX = $(this).offset().left,
        posY = $(this).offset().top;
    $(this).append(touchPulse);
    touchPulse.css({left:(e.pageX - posX),top:(e.pageY - posY)});
    setTimeout(function() { touchPulse.remove(); }, 1000);
}
$("menu").on("click","li",touchPulse);