JSFiddle - React, Tailwind, and code Playground

HTML

<button class="ul">
<span>10</span>
<ul class="enjoy" id="page_count">
<li>10</li>
<li>20</li>
<li>30</li>
<li>40</li>
<li>50</li>
</ul>
</button>

CSS

*:after, *:before{position: absolute;content:'';}
*{margin:0px;border: none;padding:0px;outline: none;position:relative;}

.ul{
	position: relative;
	margin: 20px;
	padding: 5px 57px 5px 15px;
	border: 5px solid #00d486;
	color: white;
	font-size: 1.2em;
	transition: padding 0.2s, border-color 0.8s, box-shadow 0.1s;
	background-color: #00d486;
	box-shadow: 0px 3px 0px #00bf79;
}

.ul:before{
	right: 0px;
	top: 0px;
	width: 40px;
	height: 100%;
	border-left: 2px solid #00c87e;
}

.ul:after{
	width: 0px;
	height: 0px;
	right: 11px;
	top: 50%;
	margin-top: -2px;
	border: 8px solid transparent;
	border-top-color: white;
}


.ul:hover, .ul:focus{
	padding: 7px 65px 7px 20px;
	border-color: #00cf83;
	box-shadow: none;
}

.ul:focus{z-index: 21323123123;}
.ul:hover::before, .ul:focus::before{background-color: #00cf83;}
.ul:focus::after{transform: rotate(180deg);margin-top: -13px;}
.ul:focus > ul{visibility: visible;opacity: 1;}

.enjoy{
	background-color: #00d989;
	opacity: 0;
	visibility: hidden;
    width:100%;
    margin-top: 5px;
	position: absolute;
	font-size: 0.9em;
	left: 0px;
	top: 100%;
	box-shadow: inset 0px 0px 3px #00905b;
	transition: visibility 0.1s, opacity 0.3s;
	overflow: hidden;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
    list-style-type: none;
}

.enjoy > li{transition: all 0.2s;padding: 12px 0px;border-bottom: 1px solid #00c87d;}

.enjoy > li:hover{background-color: #00ea94;padding: 15px 0px;}