JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<div class="left-sidebar">
    <ul id="objects">
         <li class="active" id="oversikt"><a href="#oversikt">
            <img src="http://cdn.imghack.se/images/a344aec854cf5210ff33c16780beffbb.png" alt="" />
            <p>Översikt</p>
            </a>
        </li>
        <li id="ekonomi"><a href="#ekonomi">
            <img src="http://cdn.imghack.se/images/a1be1dec8f32b8fc99a032be098e8c67.png" alt="" />
            <p>Ekonomi</p>
            </a>
        </li>
        <li id="schema"><a href="#schema">
            <img src="http://cdn.imghack.se/images/22e97b55e5a4f6b6715ace959d1f58f6.png" alt="" />
            <p>Schema</p>
            </a>
        </li>
        <li id="bokningar"><a href="#bokningar">
            <img src="http://cdn.imghack.se/images/d4367c3b0573260dabad83089408a3e7.png" alt="" />
            <p>Bokningar</p>
            </a>
        </li>
        <li id="hjalp"><a href="#hjalp">
            <img src="http://cdn.imghack.se/images/4bfaa755d9b6c5ff9d5c8ecd9b2c0103.png" alt="" />
            <p>Hjälp</p>
            </a>
        </li>
        <li id="arrow"></li>
    </ul>
</div>

CSS

body {
    background:#f3f1f2;
    font-family:sans-serif;
}
ul#objects {
    margin-left:-40px;
    list-style-type: none;
}
ul#objects li {
    cursor:pointer;
    text-align:center;
    margin-top:40px;
}
ul#objects li.active {
    cursor:pointer;
    text-align:center;
    margin-top:40px;
}
ul#objects li p {
    margin-top:0px;
    color:#aaa9a9;
    text-shadow:0px 1px rgba(255, 255, 255, 0.6);
}
.left-sidebar {
    height:609px;
    width:79px;
    position:fixed;
    left:0;
    top:0;
    background:#e8e8e8;
    border-right:solid 1px #d8d6d7;
}
ul#objects li a {
    text-decoration: none; 
}

ul#objects {
    overflow: hidden;
    position: relative;
    margin-top: 0;
}

ul#objects #arrow {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    box-shadow: 0 0 3px #666;
    -webkit-transform: rotate(-45deg);
    top:5px;
    right: -8px;
    transition: top 2s;
}
ul#objects #oversikt:target ~ #arrow {
    top: 10px;
}
ul#objects #ekonomi:target ~ #arrow {
    top: 95px;
}
ul#objects #schema:target ~ #arrow {
    top: 180px;
}
ul#objects #bokningar:target ~ #arrow {
    top: 265px;
}
ul#objects #hjalp:target ~ #arrow {
    top: 350px;
}