JSFiddle - React, Tailwind, and code Playground

by Yunpeng Fan

HTML

<div class="yb_quality">
    <div id="one">穿越火线</div>
    <div id="two">英雄联盟</div>
    <div id="three">
        <!--[diy=diycity800001]-->
        <div id="diycity800001" class="area"></div>
        <!--[/diy]-->
    </div>
    <div id="four">
        <!--[diy=diycity800002]-->
        <div id="diycity800002" class="area"></div>
        <!--[/diy]-->
    </div>
    <div id="one">炉石传说</div>
    <div id="two">CS GO</div>
    <div id="three">
        <!--[diy=diycity800003]-->
        <div id="diycity800003" class="area"></div>
        <!--[/diy]-->
    </div>
    <div id="four">
        <!--[diy=diycity800004]-->
        <div id="diycity800004" class="area"></div>
        <!--[/diy]-->
    </div>
</div>

CSS

#one {
    width:100px;
    background:url(http://www.sinogamer.com/template/yudi_city10/style/icon10.gif) left bottom no-repeat;
    float:left;
    clear:left;
    font-size:20px;
}
#two {
    width:500px;
    float:right;
    background:url(http://www.sinogamer.com/template/yudi_city10/style/icon10.gif) left bottom no-repeat;
    margin-right:120px;
    font-size:20px;
}
#three {
    width:500px;
    height:280px;
    float:left;
    clear:left;
    margin-top:10px;
}
#four {
    width:500px;
    height:280px;
    float:right;
    margin-right:120px;
    margin-top:10px;
}