JSFiddle - React, Tailwind, and code Playground

by Marite Ferrero

HTML

<div class="one">
    <div class="button-wrap">
        <div class="button-out">OFF</div>
        <div class="button-switch"></div>
    </div>
</div>

CSS

/* BUTTON 1 */
 .one .button-wrap {
    width: 120px;
    margin: 40px auto 0;
    cursor: pointer;
    height: 100%;
    background-color: #0f243e;
    border-radius: 40px;
    padding: 3px;
    color:#fff;
    transition:all 0.2s ease;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.one .button-out {
    position:absolute;
    transition:all 0.2s ease;
    padding-top:15px;
    font-size:0.8em;
    text-transform:uppercase;
    font-weight:bold;
    font-family:'Helvetica', sans-serif;
    margin-left:18px;
    color:#dd2222;
}

.one .button-switch {
    position:relative;
    left:0px;
    width: 64px;
    height: 44px;
    border:solid 13px;
    border-radius: 36px;
    transition:all 0.2s ease;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}