JSFiddle - React, Tailwind, and code Playground

by ZachWills

HTML

<nav class="menu">
    <div class="plus">+</div>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</nav>

CSS

.menu a {
    width:20px;
height:20px;
background:blue;
border:1px solid black;    
    border-radius:100%;
        display:block;
}

.plus {
    transition:all 0.5s ease-in-out;
    border-radius:100%;
    width:40px;
    height:40px;
    line-height:35px;
    font-size:32px;
    color:white;
    text-align:center;
    background:#333;
    margin:auto;
    margin-top:100px;
    cursor:pointer;
}

.clicked {
    transform:rotate(45eg);
    -webkit-transform:rotate(45deg);
}

JavaScript

$(".plus").click(function(){
    $(this).toggleClass("clicked");
});