JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div class="sim-button button1"><span>IMAPO.RU</span></div>
<br/><br/><br/><br/>
<div class="sim-button button5"><span>IMAPO.RU</span></div>
<br/><br/><br/><br/>
<div class="sim-button button10"><span>IMAPO.RU</span></div>
<br/><br/><br/><br/>
<div class="sim-button button15"><span>IMAPO.RU</span></div>
<br/><br/><br/><br/>
<div class="sim-button button20"><span>IMAPO.RU</span></div>

CSS

body {
  background: #999;
}

.sim-button{
	line-height: 50px;
	height: 50px;
	text-align: center;
	width: 300px;
	cursor: pointer;
}
.button1 {
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
	border: 1px solid rgba(255,255,255,0.5);
}
.button1 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	display: block;
}
.button1:hover {
	background-color: rgba(255,255,255,0.2);
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;	
}
.button2 {
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
	border: 1px solid rgba(255,255,255,0.5);
	overflow: hidden;
}
.button2 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	display: block;
}
.button2 span {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.button2:hover{
	background-color: rgba(255,255,255,0.2);
}
.button2:hover > span{
	opacity: 0;
	-webkit-transform: translate(0px,-40px);
	transform: translate(0px,-40px);
}
.button2::after{
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transform: translate(0, 30%);
	transform: translate(0, 30%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;	
}
.button2:hover::after{
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.button3 {
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
	border: 1px solid rgba(255,255,255,0.5);
	overflow: hidden;
}
.button3 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	display: block;
}
.button3 span {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition:...