JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<div class="list-one">
    <div class="ul-wrapper">
     <ul>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
    </ul>       
    </div>
</div>

CSS

html, body, ul, li{
    margin: 0;
    padding: 0;
}

a,
a:visited{
    color: #FFF;
    font: 300 14px/18px Helvetica, Arial, sans-serif;
    text-decoration: none;
    display: block;
    padding: 2px 10px;
}

a:hover{
    background-color: #FFF;
    color: #000;
}

ul{
    padding: 10px 0;
    width: 100px;
    height: 150px;
    border-radius: 0 45% 45% 0;
    background-color: #1064A1;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #63C0EB),
        color-stop(1, #1064A1)
    );
    background-image: -o-linear-gradient(bottom, #63C0EB 0%, #1064A1 100%);
    background-image: -moz-linear-gradient(bottom, #63C0EB 0%, #1064A1 100%);
    background-image: -webkit-linear-gradient(bottom, #63C0EB 0%, #1064A1 100%);
    background-image: -ms-linear-gradient(bottom, #63C0EB 0%, #1064A1 100%);
    background-image: linear-gradient(to bottom, #63C0EB 0%, #1064A1 100%);
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9;
    overflow: hidden;
}

    li{
        margin: 0;
        padding: 0;
    }

.ul-wrapper{
    position: relative;
}

.list-one{
    margin: 10px;
    height: 150px;
    width: 300px;
    overflow: hidden;
    position: relative;
    background: url(http://s7.hostingkartinok.com/uploads/images/2014/08/9c1ba538b890a7694034756c2e478e73.png) no-repeat 60px top transparent;
}

ul.red{
    background-color: #8C1720;
    background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #F21D1D),
	color-stop(1, #8C1720)
);
background-image: -o-linear-gradient(bottom, #F21D1D 0%, #8C1720 100%);
background-image: -moz-linear-gradient(bottom, #F21D1D 0%, #8C1720 100%);
background-image: -webkit-linear-gradient(bottom, #F21D1D 0%, #8C1720 100%);
background-image: -ms-linear-gradient(bottom, #F21D1D 0%, #8C1720 100%);
background-image: linear-gradient(to bottom, #F21D1D 0%, #8C1720 100%);
}