JSFiddle - React, Tailwind, and code Playground

by johnbk

HTML

<div id="right_navigation_container">
    <ul>
        <li id='library_one'><a href='#'>library</a>

        </li>
        <li id='library_two'><a href='#'>library</a>

        </li>
        <li id='library_three'><a href='#'>library</a>

        </li>
        <li id='library_four'><a href='#'>library</a>

        </li>
    </ul>
</div>

CSS

#right_navigation_container ul {
    margin-left:10px;
    margin-right:10px;
}
#right_navigation_container ul li a {
    color:black;
    text-decoration:none;
    padding-right:10px;
}
#library_one {
    background:url("http://oi61.tinypic.com/5trnmh.jpg") 7px 10px no-repeat, linear-gradient(180deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%)
}
#library_two {
    background:url("http://oi61.tinypic.com/5trnmh.jpg") 7px -28px no-repeat, linear-gradient(180deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%);
}
#library_three {
    background: url("http://oi61.tinypic.com/5trnmh.jpg") 7px -17px no-repeat, linear-gradient(180deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%)
}
#library_four {
    background:url("http://oi61.tinypic.com/5trnmh.jpg") 7px -110px no-repeat, linear-gradient(180deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%)
}
#right_navigation_container ul li {
    padding:10px 0 10px 30px;
    border:solid 1px #EAE7E1;
    margin-top:13px;
    border-radius: 10px;
}