JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="card">
    <!--item-->
<div class="itemswrpper">
    <div class="title">Probability</div>
    <div class="itemsCounter">
        <input type="number" class="hva-editor">
            <div class="subitems">
                <span class="topicon">Ic
                    <span class="innersubwrpper">popup
                    
                    </span>
                    <div class="popupwrapper">Here is popup text</div>
                </span>
                <span class="bar">2</span>
                
            </div>
            
       </div>
</div>
    <!--item-->
<div class="itemswrpper">
    <div class="title">text2</div>
    <div class="itemsCounter">
        <input type="number" max="99" class="hva-editor">
        <div class="subitems"> 
 
        </div>
            <span class="subwrpper">popup
            
            </span>
            
    </div>
</div>
    <!--item-->
    <div class="itemswrpper">
        <div class="title">Probability</div>
        <div class="itemsCounter">
            <input type="number" max="99" class="hva-editor">
                <div class="subitems">
                    <span class="topicon">Ic
                        <span class="subwrpper">popup</span>
                    </span>
                    <span class="bar">2</span>
                    
                </div>
             </div>
        </div>
        <!--item-->
       <div class="itemswrpper">
        <div class="title">Probability</div>
        <div class="itemsCounter">
            <input type="number" max="99" class="hva-editor">
                <div class="subitems"> 
                    <span class="topicon">Ic
                        <span class="subwrpper">popup</span>
                    </span>
                    <span class="bar">2</span>
                  </div>
             </div>
        </div>
        </div>

CSS

.card{
    background:skyblue;
    width:100%;
    display:inline-block;
    
}
.itemswrpper {
    width:150px;

    padding:5px;
    float:left;
}
.title {
    display:block;
    width:100px;
    overflow:hiddle;
    font-size:14px;
}
.itemsCounter {
    width:76px;
    position:relative;
}
.hva-editor {
    width: 50px;
    height: 36px;
    position: relative;
    border: none;
    padding: 0 20px 0 6px;
    text-align: center;
    outline-offset: 0px;
    outline:none;
    vertical-align:top;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.subitems {
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:14px;
}
.bar {
    position:absolute;
    right:0;
    top:0;
    background:#ddd;
    padding-top: 18px;
    width:14px;
    text-align:center;
    z-index:99;
    bottom:0;
}
.topicon {
    position:absolute;
    right:0;
    top:0;
    z-index:100;
    background:lightyellow;
    width:14px;
}
.subwrpper, .innersubwrpper {
    display:none;
    width:45px;
    background:yellowgreen;
    position:absolute;
    right:-45px;
    top:0;
    z-index:100;
    text-align:right;
}
.itemsCounter:hover .topicon {
    background:green;
}
.itemsCounter:hover .subwrpper {
    display:block;
}

.topicon:hover .innersubwrpper {
    display:block;
}

.popupwrapper{
    background:red;
    position:absolute;
    right: -74px;
    top: 18px;
    display:inline-block;
}
/* .topicon .innersubwrpper:hover .popupwrapper{
    display:inline-block;
} */