JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="main">
	
<div class="header">
	<img src="message.svg"/>
	<span class="messageNo">8</span>
	<div class="title">未读消息</div>
</div>

<div class="main-center">
<div class="item left common">
	<a href="#">专栏</a>
</div>
<div class="item right common">
<a href="#">通告</a>
</div>
</div>

<div class="main-subcenter">

<div class="item left subleftMain">
    <a href="#" class="sunTitle">写真集</a>
</div>
<div class="item right subForm" >
<div class="subitem sub-left-top">
	<a href="#">发通告</a>
</div>
<div class="subitem sub-right-top">
	<a href="#">找艺人</a>
</div>
<div class="subitem sub-left-bottom">
	<a href="#">账户设置</a>
</div>
<div class="subitem sub-right-bottom">
	<a href="#"><img src="233.jpg"></a>
</div>
</div>

</div>

<div class="footer">
	Copyright © <strong>me-kevin</strong>
	All Right Reserved
</div>

</div>

CSS

/*
*mIndex.css
*2015/4/7
*built by @kevin
 */

*{
	margin:0;
	padding: 0;
}

li{
	list-style: none;
}

a{
	color:#fff;
	text-decoration: none;
}
.clearfix:after{
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix{
	*zoom:1;
}

body{
	background-color: #333;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	font-size: 100%;
}

.header,.footer{
	position: relative;
	width: 100%;
	height:160px;
	background-color: #345AA3;
	color:#fff;
	font-size: 100%;
	text-align: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.main-center .left, .main-center .right {
    -webkit-flex-direction: column;
    flex-direction: column;
}

.header img{
	width: 64px;
}


.logo {
width: 60px;
height: 60px;
background: url(/Areas/Mobile/Content/Article/Index/logonoword2x.png);
background-size: 60px 60px;
background-repeat: no-repeat;
background-position: center center;
}

.title {
margin-top: 6px;
font-size: 120%;
}

.main-center img {
    width:80px;
}

.messageNo {
	font-size: 150%;
}

.footer{
	background-color: #999;
	color: #666;
	font-size: 100%;
}

.main-center,.main-subcenter,.subForm{
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
	display: flex;
	-webkit-justify-content:space-around;
	justify-content:space-around;
	-webkit-align-items:flex-end;
	align-items:flex-end;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}

.common {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
	display: flex;
	-webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;

}

.item{
	width:48%;
	margin:1% 0;
	color:#fff;
	min-height: 160px;
}

.left{
	background-color: #913E8E;
}

.right{
	background-color: #00B1BD;
}

.userface{
	width: 120px;
}


.subitem{
	width: 50%;
	height: 80px;
	background-color: #333;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
	display: flex;
	-webkit-justify-content:...