JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contain">
    <div class="time-line">
        <span class="tline-circle"></span>
        <div class="tline-font">提交申请</div>
        <p class="tline-time">2017-01-22 13:30</p>
    </div>
    <div class="time-line">
        <span class="tline-circle"></span>
        <div class="tline-font">提交申请</div>
        <p class="tline-time">2017-01-22 13:30</p>
    </div>
    <div class="time-line">
        <span class="tline-circle"></span>
        <div class="tline-font">提交申请</div>
        <p class="tline-time">2017-01-22 13:30</p>
    </div>
</div>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.contain{
    width: 90%;
    margin: 10px auto;
}
.time-line{
	position: relative;
	padding-bottom:20px;
	color:#8e8e8e;
	font-size: 1.2em;
	width:1px;
	background:#ccc;
}
.time-line:last-child{
	border-left:none;
	width:0px;
}
.time-line .tline-circle{
	position:absolute;
	display:inline-block;
	width:8px;
	height:8px;
	border-radius:50%;
	left:0;
	top:0;
	-webkit-transform:translateX(-50%);
	     -o-transform:translateX(-50%);
	        transform:translateX(-50%);
	background-color:#ccc;
}
.time-line .tline-font,
.time-line .tline-time{
	position:relative;
	top:-8px;
	padding-left:15px;
	min-width: 150px;
}
.time-line .tline-time{
	color:#a9a9a9;
	margin-bottom: 0px;
	padding-top:5px;
	font-size:0.8em;
	top:-15px;
}