JSFiddle - React, Tailwind, and code Playground

by mejileben

HTML

<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">
                logout
            </button>
        </div>
    </div>
</div>
<div class="frame-contents">
    <div class="mod-question">
        <div class="logo">
            <div class="counts">
                <span class="q">Q</span>
                <span class="count">4</span>
                /
                <span class="whole">20</span>
            </div>
            <div class="score">
                <span class="now">現在正答率</span>
                <span class="percent">66%</span>
            </div>
        </div>
        <div class="sentence">
            0〜20kHzの帯域幅のオーディオ信号をディジタル信号に変換するのに必要な最大のサンプリング周期を標本化定理によって
求めると，何マイクロ秒か。
        </div>
        <div class="choices">
            <ul>
                <li class="choice">2.5</li>
                <li class="choice">5</li>
                <li class="choice">25</li>
                <li class="choice">50</li>
            </ul>
        </div>
    </div>
    <div class="mod-answer">
        <div class="answer">
            <span class="result">正解！</span>
            <span class="label">解答</span>
            <span class="target">25</span>
        </div>
        <div class="description">
            <div class="label">
                <span class="target">解説</span>
            </div>
            <div class="sentence">
                標本化定理とは、アナログ信号をディジタル信号に変換する際のサンプリングにおいて、ディジタル化した信号
を元のアナログ信号に戻すためには、アナログ信号の最高周波数の２倍以上でサンプリングしなければならないという定理です。信号というのは波形で 1Hzの信号を図にすると
以下のようになります。つまり、上弦と下弦が合わさって1回の波なので、この1Hzの信号を正しく記録するには2回の記録をしなければならないのです。この問題の場合、0〜20kHzの帯域幅ということなので、最高周波数 20kHzの2倍の40kHzでのサンプリングが必要ということになります。ここまでわかれば後は、サンプリング1回あたりの周期を求める
ため、1秒を40kHzで割り、　1÷40,000＝25×10-625マイクロ秒という答えを得ることができます。
            </div>
        </div>
        <div class="submit">
            <div class="button">
   ...

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-image: url(https://s4.postimg.org/y86m0b88d/02634x_Fotor.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/* 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;
}
.mod-question {
    margin: 10px 20px;
    padding: 10px;
    background: #fff;
    border-left: 2px solid #cccccc;
    border-top: 2px solid #cccccc;
    border-right: 2px solid #555555;
    border-bottom: 2px solid #555555;
}
.mod-question .logo {
    display: flex;
    border-bottom: 1px solid #ccc;
}
.mod-question .logo .counts {
    flex: auto;
}
.mod-question .logo .q {
    font-weight: bold;
    font-size: 140%;
    color: #2af;
}
.mod-question .logo .count {
    font-weight: bold;
    font-size: 120%;
    color: #2af;
}
.mod-question .logo .whole {
    font-weight: bold;
    font-size: 120%;
}
.mod-question .logo .score {
    width: 9rem;
}
.mod-question .logo .score .percent {
    font-weight: bold;
    font-size: 140%;
    color: #339999;
}
.mod-question .sentence {
    padding-top: 5px;
}
.mod-question .choices {
    
}
.mod-question .choices ul {
    
}
.mod-question .choices .choice {
    border-radius: 10px;
    background-color: #399;
    color: #fff;
    text-align: center;
    padding: 5px;
    margin: 15px 20px 0...