JSFiddle - React, Tailwind, and code Playground

by Cal Francesco

HTML

<ul class='badgeP'>
			<li class='badgeP1'><span class='ttbadgeP1'><span class='ttbadgeP1-text'>reputasi klik</span></span>
				556
			</li>
		</ul><br>
		. <input type='button' value='muke'></input>

CSS

.badgeP {
			list-style: none;
			padding:0;
			padding-bottom: -10px;
			margin-left: 25px;
			display: inline-block;
			position: relative;
           // overflow:hidden
		}
		.badgeP > li{
			display: inline-block;			
		}
		li.badgeP1:before{
			content: "\25cf\00a0";
			font-family: arial;
			font-size: 100%;			
			position: relative; 
			left: 6px;
			margin-left: -4px;
		}
		li.badgeP1:before {
			color: orange;
		}
		.badgeP1:hover .ttbadgeP1{
			opacity:1;
		}
		.badgeP1{
			position: relative;
		}

		.ttbadgeP1{
			background-color: black;
			font-size: 90%;
			padding-left: 3px;
			padding-right: 7px;
			padding-top: 0px;
			padding-bottom: 2px;
			margin: auto;
			width: 40px;
			height: auto;
			position: absolute;
			border-radius: 3px;
			left: -18px;
			top: 17px;
			color: white;
			box-shadow: 2px 2px 2px #888888;
			opacity: 0;
			-webkit-transition: opacity 0.5s;
			-moz-transition:  opacity 0.5s;
			-ms-transition: opacity 0.5s;
			-o-transition:  opacity 0.5s;
			transition:  opacity 0.5s;
		}
		.ttbadgeP1-text:before{
			content: '';
			width: 0px;
			height: 0px;
			position: absolute;
			border-style: solid;
			border-width: 4px;
			border-color: transparent transparent black transparent;
			left: 17px;
			top: -8px;
		}
		.ttbadgeP1-text{
			position: relative;
			float: left;
			width: auto;
			text-align: center;
		}
input{
    position:relative
}