JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<a href="#" class="iconContainer" >
            <div class="icon">
                <div class="handlebar"></div>
                <div class="suitcase"></div>
            </div>
</a>
<a class="iconContainer" href="?cat=3">
            <div class="icon">
                <div class="line" style="width: 50%;"></div>
                <div class="line" style="width: 70%;"></div>
                <div class="line" style="width: 80%;"></div>
                <div class="line" style="width: 90%;"></div>
                <div class="line" style="width: 100%;"></div>
                <div class="line" style="width: 80%;"></div>
                <div class="line" style="width: 50%;"></div>            
            </div>
        </a>

CSS

.iconContainer
    {
        background: #0094FF;
        margin: 20px auto;
        border-radius: 100%;
        display: block;
        padding: 10px;
        width: 200px;
        -webkit-transition: all .2s linear;
    }
.iconContainer:hover
    {
        background: #777;
        -webkit-transform: rotate(-15deg);
    }
.icon
    {
        background: #FFF;
        width: 160px;
        height: 150px;
        border-radius: 100%;
        margin: 10px auto;
        display: block;
        padding: 15px 10px;
    }
.line
    {
        background: #777;
        border-radius: 5px;
        display: block;
        padding: 5px 0;
        margin: 10px auto;
    }
.handlebar
    {
        display: block;
        margin: 20px auto 0;
        padding: 5px 0;
        background: #FFF;
        width: 60px;
        border: 10px solid #777;
        border-bottom: none;
        box-sizing: border-box;
        -moz-box-sizing: padding-box;
    }
.suitcase
    {
        background: #777;
        width: 120px;
        margin: 0 auto;
        height: 80px;
    }