JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div id="add">
    <button>Became a friend</button>
<div id="list">
    <label><input type="checkbox">Add on facebook</label>
   <label><input type="checkbox">Add on twitter</label>
    <label><input type="checkbox">Add on g+</label>
    <button>proceed</button>
    </div>
</div>

CSS

#add{
display:block;
width: 200px;
    margin: 50px auto;
}

button{
padding: 5px;
}

#list{
display: none;
    position: relative;
    padding: 5px 5px;
    background: rgba(0,0,0,0.7);
    width: 130px;
    margin-left: -15px;
}

#list button{
width:90%;
    margin: 5px 5%;
}

label{
    display: inline-block;
    color: white;
}

JavaScript

$('button').click(function(){
    $('#list').toggle();
    })