Edit in JSRun


            
<div class="wrap">
    <div class="login-header">
        <ul class="clearfix">
            <li>My Account</li>
            <li>Sign Up</li>
        </ul>
    </div>
    <div class="login-tip">
        <p>Got an account? <strong>Enter your details below to login</strong></p>
    </div>
    <div class="login-content">
        <form action="#" method="post">
            <div class="email">
                <label for="email"><strong>Email*</strong></label><input type="text" id="email">
            </div>
            <div class="password">
                <label for="password"><strong>Password*</strong></label><input type="password" id="password">
            </div>
            <div class="login-operation">
                <input type="submit" value="Login">
                <a href="javascript:;">Forgotten password?</a>
            </div>
        </form>
    </div>
    <div class="login-footer">
        <ul class="clearfix">
            <li>Sign in with:</li>
            <li><i class="iconfont">&#xe6c3;</i><span>Facebook</span></li>
            <li><i class="iconfont">&#xe600;</i><span>Twitter</span></li>
        </ul>
    </div>
</div>
<div class="mask"></div>
* {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            font: 14px/1.5 "微软雅黑", Arial;
            color: #333;
        }

        ul li {
           list-style: none;
        }
        @font-face {
            font-family: 'iconfont';  /* project id 212967 */
            src: url('//at.alicdn.com/t/font_19u4nw30epnwmi.eot');
            src: url('//at.alicdn.com/t/font_19u4nw30epnwmi.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_19u4nw30epnwmi.woff') format('woff'),
            url('//at.alicdn.com/t/font_19u4nw30epnwmi.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_19u4nw30epnwmi.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:"iconfont" !important;
            font-size:16px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;}

        .clearfix {
            overflow: hidden;
            zoom: 1;
        }

        .mask {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.2);
        }

        .wrap {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 999;
            width: 480px;
            transform: translate(-50%, -50%);
          	-webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            overflow: hidden;
            border-radius: 8px;
            background-color: #fff;
        }

        ul>li {
            float: left;
            cursor: pointer;
        }

        a {
            color: #333;
        }

        .login-header ul>li {
            width: 240px;
            height: 60px;
            line-height: 40px;
            font-size: 18px;
            text-align: center;
            padding: 10px 20px;
        }
        .login-header ul>li:last-child {
            background-color: #e0e0e0;
        }
        .login-tip {
            height: 60px;
            color: #fff;
            text-align: center;
            line-height: 60px;
            background-color: #6280ff;
        }
        .email, .password {
            position: relative;
            width: 100%;
            border-bottom: 1px solid #cdcdcd;
            overflow: hidden;
            padding: 28px 40px;
        }
        #email, #password {
            position: absolute;
            left: 160px;
            top: 25px;
          	width: 260px;
            height: 28px;
            border: none;
            outline: none;
            vertical-align: middle;
        }
        .login-operation {
            padding: 28px 40px;
        }
        .login-operation input[type="submit"] {
            color: #fff;
            font-size: 20px;
            width: 180px;
            height: 60px;
            background-color: #41ca76;
            border-radius: 5px;
            border: none;
            cursor: pointer;
        }
        .login-operation a {
            margin-left: 64px;
        }
        .login-footer {
            height: 70px;
            line-height: 70px;
        }
        .login-footer ul>li {
            width: 160px;
            text-align: center;
            color: #fff;
            background-color: #333;
            border-right: 1px solid #8e8e8e;
            padding: 0 20px;
        }
        .login-footer ul>li:last-child {
            border: none;
        }
        .login-footer .iconfont {
            font-size: 20px;
            color: #6280ff;
            margin-right: 8px;
        }