JSFiddle - React, Tailwind, and code Playground

by mejileben

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<div class="frame-header">
    <div class="mod-header">
        <div class="serviceName inlb">
            <span class="logo">Manaful</span>
        </div>
        <div class="login inlb">
            <button class="loginButton">
                login
            </button>
        </div>
    </div>
</div>
<div class="frame-content">

</div>
<div class="frame-footer">
    <div class="stop inlb">
        <button class="stopButton">
            Cancel
        </button>
    </div>
    <div class="evaluate inlb">
        <div class="star inlb" data-star-number="1"><i class="fa fa-star-o"></i></div>
        <div class="star inlb" data-star-number="2"><i class="fa fa-star-o"></i></div>
        <div class="star inlb" data-star-number="3"><i class="fa fa-star-o"></i></div>
        <div class="star inlb" data-star-number="4"><i class="fa fa-star-o"></i></div>
        <div class="star inlb" data-star-number="5"><i class="fa fa-star-o"></i></div>
    </div>
    <div class="submit is-hide inlb">
        <button class="submitButton">
            Submit
        </button>
    </div>
</div>

CSS

html {
    height: 100%;
}
body {
    margin: 0;
}
/*リストのマークを消します*/
ul,ol,li{
	list-style-type: none;
}
/* frame-header */
.frame-header {
    width: 100%;
}
/* mod-header */
.mod-header {
    padding: 5px 0px;
    background: #11cccc;
}
.mod-header .inlb {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
}
.mod-header .serviceName {
    margin-left: 10px;
}
.mod-header .serviceName .logo {
    font-weight: bold;
    color: #ffffff;
}
.mod-header .login {
    float: right;
}
.mod-header .login .loginButton {
    margin-right: 20px;
    padding: 5px 10px;
    border-left: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    border-right: 1px solid #555555;
    border-bottom: 1px solid #555555;
    border-radius: 5px;
    color: #ffffff;
    background: #339999;
    font-size: 60%;
}
/* frame-content */
.frame-content {
    height: 1000px;
    background-image: url(https://s30.postimg.org/6j5aqfb5d/2017-06-19_21.54.30.png);
    background-repeat: no-repeat;
    background-attachment: auto;
    background-size: contain;
    overflow:scroll;
}
/* frame-footer */
.frame-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
}
.frame-footer .inlb {
    display: inline-block;
}
.frame-footer .is-hide {
    display: none;
}