JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<div class="dl_listitem">
    <div class="dl_link">
        <a id="dl_label" class="label_ios">人教版</a><a href="" class="dl_appversion_cn">
        单词之美小学</a>
    </div>
</div>

CSS

.dl_listitem{
    background:red;
}
#dl_label{
	height:50px;
	width:80px;
	line-height:50px;    
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}

.label_ios{
	background:rgba(24,69,189,1.0);
}

.dl_listitem a{
	display:inline-block;
}

.dl_appversion_cn{
	height:50px;
	width:200px;
	line-height:50px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	background:rgba(255,255,255,0.5);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all  0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.dl_appversion_cn:hover{
	background:rgba(255,255,255,0.2);
}