JSFiddle - React, Tailwind, and code Playground
by John Grivas
HTML
<div id="container">
<div id="left">Registracia</div>
<div id="center">✔</div>
<div id="right">Reset Hesla</div>
</div>
CSS
#container {
width:300px;
text-align:center;
margin:0 auto;
margin-top:50px;
}
#left {
float:left;
width:125px;
height: 20px;
margin-top:10px;
color:white;
background-color: #101010;
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px 0px 0px 12px;
-moz-border-radius:7px 0px 0px 7px;
border-radius: 7px 0px 0px 7px;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #101010), color-stop(15%, #101010), color-stop(100%, grey));
background: -moz-linear-gradient(top, #101010 0%, #101010 55%, #grey 130%);
}
#center {
font-family: FontAwesome;
display: inline-block;
margin:0 auto;
width:50px;
height: 35px;
font-size:30px;
color:#000000;
/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #00ff00;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, green), color-stop(15%, green), color-stop(100%, grey));
background: -moz-linear-gradient(top, green 0%, green 55%, #grey 130%);
}
#right {
float:right;
width:125px;
height: 20px;
margin-top:10px;
background-color: white;
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px 0px 0px 12px;
-moz-border-radius:0px 7px 0px 7px;
border-radius: 0px 7px 7px 0px;
color:white;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #101010), color-stop(15%, #101010), color-stop(100%, grey));
background: -moz-linear-gradient(top, #101010 0%,...