JSFiddle - React, Tailwind, and code Playground

by espyMur

HTML

<div class="buttton-login-class">
	<div class='engineer-login'>
		<h5 class="cntrTxt">
			I'm an Engineer
		</h5>
    <a href="#" class="engineer-button" onmouseover="changeBackground()">Create an Engineer account</a>
	</div>
	<div class='engineer-login'>
		<h5 class="cntrTxt">
			I have a Project
		</h5>
    <a href="#" class="client-button" onmouseover="changeBackgroundEngin()">Sign up as a client</a>
	</div>
</div>

CSS

.buttton-login-class{
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: table;
    height: 111px;
    text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
    text-size-adjust: 100%;
    width: 658px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 329px 55.5px;
    transform-origin: 329px 55.5px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 14px / normal Oxygen, sans-serif;
    margin: 0px 167px;
    outline: rgb(255, 255, 255) none 0px;
}

.engineer-login {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: table-cell;
    height: 110.812px;
    text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
    text-size-adjust: 100%;
    width: 329px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 164.5px 55.4062px;
    transform-origin: 164.5px 55.4062px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 14px / normal Oxygen, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    padding: 0px 17.5px;
}

.cntrTxt {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 17px;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
    text-size-adjust: 100%;
    width: 295px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 147.5px 8.5px;
    transform-origin: 147.5px 8.5px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal normal normal 14px / normal Oxygen, sans-serif;
    margin: 0px 0px 17.5px;
    outline: rgb(255, 255, 255) none 0px;
}/*#H5_3, #H5_6*/

.engineer-button {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: block;
    height: 76.3125px;
    text-align: center;
    text-decoration: none;
    text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
    text-size-adjust: 100%;
    width: 294px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 147px 38.1562px;
    transform-origin: 147px 38.1562px;
    background:...

JavaScript

engineerbtn=document.getElementsByClassName("engineer-button");
    clientbtn=document.getElementsByClassName("client-button");
    var cssValue='2px solid #eee';
    function changeBackgroundEngin(){
      // this function will change the background of a elemnt when the mouse is over another
      engineerbtn[0].style.background='none';
      engineerbtn[0].style.border=cssValue ;
    }
    function changeBackground(){
      // this function will change the background of a elemnt when the mouse is over another
      engineerbtn[0].style.background='#5076bb none repeat scroll 0% 0% / auto padding-box border-box';
      engineerbtn[0].style.border='2px solid #5076bb' ;
      engineerbtn[0].style.color='#eee'
    }