JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<div class="context-menu">
	<ul style="height: 10px;"></ul>
	<ul style="height: 25px;"></ul>
	<ul style="height: 50px;"></ul>
	<ul style="height: 100px;"></ul>
	<ul style="height: 200px;"></ul>
	<ul style="height: 400px;"></ul>
</div>

CSS

.context-menu ul {
	border:1px solid #e8e0e0;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow:  3px 3px 2px 2px rgba(00, 00, 00, .35);
    box-shadow:  3px 3px 2px 2px rgba(00, 00, 00, .35);
	
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */

    /* set a specific height & position */
    background-size: 100% 33px;
    background-repeat: no-repeat;
    background-position: 0 100%;
}