JSFiddle - React, Tailwind, and code Playground

by painotpi

HTML

<div class="left-sidebar">
    <ul id="objects">
        <li class="active">
            <span class='triangle'></span>
            <img src="http://cdn.imghack.se/images/a344aec854cf5210ff33c16780beffbb.png" alt="" />
            <p>Översikt</p>
        </li>
        <li>
            <img src="http://cdn.imghack.se/images/a1be1dec8f32b8fc99a032be098e8c67.png" alt="" />
            <p>Ekonomi</p>
        </li>
        <li>
            <img src="http://cdn.imghack.se/images/22e97b55e5a4f6b6715ace959d1f58f6.png" alt="" />
            <p>Schema</p>
        </li>
        <li>
            <img src="http://cdn.imghack.se/images/d4367c3b0573260dabad83089408a3e7.png" alt="" />
            <p>Bokningar</p>
        </li>
        <li>
            <img src="http://cdn.imghack.se/images/4bfaa755d9b6c5ff9d5c8ecd9b2c0103.png" alt="" />
            <p>Hjälp</p>
        </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;
    position: relative;
}
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;
}
.triangle{
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid white; 
    position: absolute;
    right: -1px;
    top: 10px;
}

JavaScript

$("li").click(function(){
    $this = $(this);
    $(".triangle").animate({
        top: $this.position().top + "px"
    });
});