JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui buttons"><div class="ui button"><a title="معاينة القالب" href="http://da3yh.blogspot.com" target="_blank">معاينة القالب</a></div><div class="or"></div><div class="ui positive button"><a title="تحميل القالب" href="http://da3yh.blogspot.com" target="_blank">تحميل القالب</a></div></div></div>

CSS

.ui.button {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	min-height: 1em;
	outline: none;
	border: none;
	background-color: #F0F0F0;
	color: #808080;
	margin: 0;
	padding: .8em 1.5em;
	font-family: droid arabic kufi;
	font-size: 1rem;
	text-transform: uppercase;
	line-height: 1;
	font-style: normal;
	text-align: center;
	text-decoration: none;
	border-radius: .25em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.ui.buttons .active.button,
.ui.active.button {
	background-color: #EAEAEA;
	background-image: none;
	-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset !important;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset !important;
	color: rgba(0,0,0,0.7);
}

.ui.button:not(.loading):hover {
	background-image: -webkit-gradient(linear,top left,bottom left,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.08)));
	background-image: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.08));
	background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.08));
	color: rgba(0,0,0,0.7);
}

.ui.button.active:hover {
	background-image: none;
}

.ui.button:hover .icon,
.ui.button.hover .icon {
	opacity: .85;
}

.ui.button:not(.loading):active,
.ui.active.button:not(.loading):active {
	background-color: #F1F1F1;
	color: rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset !important;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset !important;
}

.ui.buttons .or {
	position: relative;
	float: left;
	width: .3em;
	height: 1.1em;
	z-index: 3;
}

.ui.buttons .or:before {
	position: absolute;
	top: 50%;
	left: 50%;
	content: 'or';
	background-color: #5a5a5a;
	margin-top: -.1em;
	margin-left: -.9em;
	width: 1.8em;
	height: 1.8em;
	line-height: 1.55;
	color: #fff;
	font-style: normal;
	font-weight: normal;
	text-align: center;
	border-radius: 500px;
	-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
	box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
	-webkit-box-sizing: border-box;
	-moz-box-sizing:...