JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div>
    <p>Visible to members?</p><span class="add_group_tt">?<p>description</p></span>
<label>
<input type="checkbox">
<span class="yes">yes</span>
<span class="no">no</span>
    </label>
</div>
<div>
    <p>Visible to members?</p><span class="add_group_tt">?<p>description</p></span>
<label>
<input type="checkbox">
<span class="yes">yes</span>
<span class="no">no</span>
    </label>
</div>

CSS

div{
display: block;
    width:300px;
    margin: 50px auto;
    border-radius: 3px;
    border: solid 1px silver;
    owerflow: hidden;
    height: 22px;
}

p{
display: inline-block;
    float: left;
    font: 10pt calibri;
    width:150px;
    margin:0 ;
    padding: 0;
}

label{
display: inline-block;
    float: right;
    width:80px;
border-radius: 3px;
    border: solid 1px silver;
}
input{
display: block;
    width: 40px;
    height: 20px;
    position: absolute;
    opacity: 0;
    z-index:999;
}

input:checked{
margin-left: 40px;
}

span{
display: inline-block;
    width: 40px;
    height: 20px;
    background: white;
    color: black;
    text-align: center;
    margin: 0;
float: left;
}

.no{
background: black;
    color: white;
}

input:checked ~ .yes{
background: black;
    color: white;
}

input:checked ~ .no{
background: white;
    color: black;
}

.add_group_tt > p{
display: none;
    position: relative;
    z-index: 999;
    margin-bottom: 10px;
    -webkit-animation: display 1s 0.2s;
}

.add_group_tt:hover>p{
display: block;
}