JSFiddle - React, Tailwind, and code Playground

tyled with CSS and Images. https://github.com/tdreyno/iphone-style-checkboxes

HTML

<script src="https://raw.github.com/tdreyno/iphone-style-checkboxes/master/jquery/iphone-style-checkboxes.js"></script>
<link rel="stylesheet" href="http://i.minus.comundefined/dq3Ggt1kiEs73.css" type="text/css" media="screen" charset="utf-8">
<div class="page_section_menu">
    
    <ul>

        <li class=""><a class="uprlblprv" id="mgn" rel="js_privacy_block_notifications" href="#">General</a></li>

        <li class=""><a class="uprlblprv" id="mno" rel="js_privacy_block_notifications" href="#">Notifications</a></li>



        
    </ul>
    
</div>

<div id="ps_notification" class="prcenter">
    <div class="pvccntr">
<div class="pfield"><span class="lblprvstn">New Messages</span><span class="slctprvstn">
<input type="checkbox" id="on_off_on" /></span></div>
</div>
</div>


<div id="ps_acgeneral" class="prcenter">
    <div class="pvccntr">
<div class="pfield"><span class="lblprvstn">general</span><span class="slctprvstn">
<input type="checkbox" id="on_off_on" /></span></div>
</div>
</div>

CSS

.prcenter {
    font-family: Lucida Console;
    font-size: 12px;
    margin-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 511px;
    height:auto;
    float:left;
}
.privwrapper
{
width:100%;
height:auto;
}
#ps_acsetting,#ps_blockusers,#ps_acgeneral
{
display:none;
}
.pselect
{ 
font-size:10px;
width:95px !important;
}    
.pfield {
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 18px;
    padding-bottom: 17px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 17px;
    width: 420px;
}
.pfield:hover{

}
.pvccntr
{
display:block;
}

.pvccntr:hover
{
background-color:#F6F6F6;

}
.slctprvstn
{
float:right;
margin-top:-5px;
}

.lblprvstn {
    float: left;
    font-family: Trebuchet MS;
    font-weight: bold;
    margin-top: 5px;
    width:250px;
    height:20px;
}


.page_section_menu {
    border-bottom-color: #DFDFDF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
    float:left;
}

.page_section_menu ul {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 55px;
    margin-right: 0;
    margin-top: 20px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.page_section_menu ul li {
    
    float: left;
    
}
.uprlblprv
{
text-decoration:none;
}
.page_section_menu ul li a, .page_section_menu ul li a:hover, a.page_section_menu_link, a.page_section_menu_link:hover {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: block;
    font-weight: bold;
    line-height: 26px;
    margin-right: 5px;
    padding-bottom: 0;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 0;
}
.page_section_menu ul li.active a, .page_section_menu ul li.active a:hover {
    -moz-text-blink: none;
    -moz-text-decoration-color:...

JavaScript

$(function(){
    
$('#mgn').click(function(){

$('#ps_acgeneral').show();
$('#ps_notification').hide();
});
    $('#mno').click(function(){

$('#ps_acgeneral').hide();
$('#ps_notification').show();
});
});

$(window).load(function() {
    $('#on_off_on :checkbox').iphoneStyle();
});