JSFiddle - React, Tailwind, and code Playground

HTML

<li onmouseover="randColours(this)" onmouseout="rcrm(this)"><a href="">PHOTOS</a>
</li>

JavaScript

var tb = ["borderBottom", "borderTop"];
var colour = ["#16a085", "#8e44ad", "#ee006b", "#27ae60", "#c0392b", "#e67e22", "#2980b9"];

function randColours(obj) {
    var randTB = tb[Math.floor(Math.random() * tb.length)];
    var randColour = colour[Math.floor(Math.random() * colour.length)];
    obj.style[randTB] = "3px solid " + randColour;
}

function rcrm(x) {
    x.style.border = "3px solid #2c3e50";
}