JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<table>
<td id="register_button_area"><input type="submit" name="register" value="register" id="register_button" /></td>
<td id="login_button_area"><input type="submit" name="login" value="login" id="login_button"  /></td>
</table>
</form>

JavaScript

var reg_button = document.getElementById("register_button");
var log_button = document.getElementById("login_button");
reg_button.onmouseover = function() {
    reg_button.style.borderLeft="1px solid black";
    reg_button.style.borderTop="1px solid black";
    reg_button.style.borderRight="1px solid #8A080A";
    reg_button.style.borderBottom="1px solid #8A080A";
};
reg_button.onmouseout = function() {
    reg_button.style.borderRight="1px solid black";
    reg_button.style.borderBottom="1px solid black";
    log_button.style.borderLeft="1px solid #8A080A";
    log_button.style.borderTop="1px solid #8A080A";
};
log_button.onmouseover = function() {
    log_button.style.borderLeft="1px solid black";
    log_button.style.borderTop="1px solid black";
    reg_button.style.borderRight="1px solid #8A080A";
    reg_button.style.borderBottom="1px solid #8A080A";
};
log_button.onmouseout = function() {
    log_button.style.borderRight="1px solid black";
    log_button.style.borderBottom="1px solid black";
    log_button.style.borderLeft="1px solid #8A080A";
    log_button.style.borderTop="1px solid #8A080A";
};