JSFiddle - React, Tailwind, and code Playground

HTML

<!-- first type: -->
<!-- <div>
    <div class="layer-mask"></div>
    <div class="layer-dialog">
        <div class="layer-dialog-content">提示内容</div>
        <div class="layer-dialog-btn">
            <a>确定</a>
        </div>
    </div>
</div> -->

<!-- second type: -->
<div>
	<div class="layer-mask"></div>
	<div class="layer-dialog">
		<div class="layer-dialog-content">提示内容</div>
		<div class="layer-dialog-btn is-cancel">
			<a class="layer-cancel">取消</a>
			<a>确定</a>
		</div>
	</div>
</div>

CSS

.layer-mask{
	position:fixed;
	z-index:20;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background:rgba(0,0,0,0.6);
}
.layer-dialog{
	position:fixed;
	z-index:30;
	width:80%;
	max-width:300px;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	background:#fff;
	text-align:center;
	border-radius:3px;
	overflow:hidden;
}
.layer-dialog-content{
	padding:2em 20px 1.5em;
	color:#353535;
	min-height:40px;
	font-size:15px;
	line-height:1.3;
	word-wrap:break-word;
	word-break:break-all;
}
.layer-dialog-btn{
	position:relative;
	line-height:48px;
    border-top: 1px solid #ccc;
}
/* first type */
.layer-dialog-btn>a{
	display:block;
	text-decoration:none;
	color:#0BB20C;
}
/* second type */
.layer-dialog-btn.is-cancel>a{
	display:inline-block;
	text-decoration:none;
	width:49%;
	color:#0BB20C;
}
.layer-dialog-btn.is-cancel .layer-cancel{
	color:#353535;
	border-right:1px solid #e2e2e2;
}