html-css-javascript-online-editor-compiler

body{
            background-color: #000;
        }
        .custom-checkbox{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        input[type="checkbox"]{
            position: relative;
            width: 120px;
            height: 45px;
            -webkit-appearance: none;
            background: linear-gradient(0deg, #343131, #000);
            outline: none;
            border-radius: 50px;
            box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2);
            cursor: pointer;
        }
        input:checked[type="checkbox"]{
            background: linear-gradient(0deg, #6dd1ff, #20b7ff);
            box-shadow: 0 0 0 2px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2);
        }
        input[type="checkbox"]::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 45px;
            background: linear-gradient(0deg, #000, #6b6b6b);
            border-radius: 50px;
            transform: scale(.98, 0.96);
            transition: .5s;
        }
        input:checked[type="checkbox"]::before{
            left: 40px;
        }
        input[type="checkbox"]::after{
            content: '';
            position: absolute;
            top: calc(50% - 3px);
            left: 60px;
            width: 6px;
            height: 6px;
            background: linear-gradient(0deg, #6b6b6b, #000);
            border-radius: 50%;
            transition: .5s;
        }
        input:checked[type="checkbox"]::after{
            left: 105px;
            background: linear-gradient(0deg, #6dd1ff, #20b7ff);
        }

Press Ctrl+Space Key for Auto complete and Intelli Sense