JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="scrollContent">
    <div>You have chosen to disable scheduling for this WebStorm. This WebStorm will now be controlled by manual settings, which can be configured below or in WebStorm Setup tabs:</div>
    <div id="disable-pop-bottom">
    <div id="disable-pop-left">
        <span>Status:</span>
    </div>
    <div id="disable-pop-right">
        
        <select id="disable-pop-select" class="bi-form-select"><option>Active</option></select>
        
        <label class="disable-pop-label"><input type="checkbox" name="checkbox" value="submission" /> Enable Submission</label>
        <label class="disable-pop-label"><input type="checkbox" name="checkbox" value="voting" /> Enable Voting</label>
        <label class="disable-pop-label"><input type="checkbox" name="checkbox" value="commenting" /> Enable Commenting</label>    
    </div>
</div>

CSS

.scrollContent {
    width:400px;
    font-family:arial;
    font-size:13px;
}
#disable-pop-left{
    width:90px;
    height:100px;
    float:left;
}
#disable-pop-left span {
    float:right;
    margin-right:15px;
    margin-top:5px;
    font-weight:bold;
}
#disable-pop-right {
    display:block;
    margin-left:50px;
}
#disable-pop-right select, #disable-pop-right label{
display:block;
margin-bottom:5px;
}

#disable-pop-bottom{
margin-top:20px;    
}
.bi-form-select {
    border: 1px solid #C8C8C8;
    font-family: arial,helvetica,helvetica neue,sans-serif;
    font-size: 13px;
    line-height: 18px;
    margin-left: 6px;
    padding: 2px;
}

#disable-pop-select {
    width:250px;
    margin-left:15px;
}
.disable-pop-label {
    font-weight: bold;
}