JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons">1. Pushing the left mouse button on this box should turn my background color dark red. Releasing the left mouse button on this box should turn my background color back to the original green.<span> No conditions will be needed! Must use Javascript to change the colors directly.</span></div>

<div class="buttons">2. Clicking this box should toggle my border color: first click turns it dark blue, second click turns it back to the original gold, third click to blue, fourth click to gold, and back and forth. Make your own variable before any functions begin, make it always keep track of what color 'state' the border is currently in, and check it in the IF conditions.</div>

<div class="buttons">3. Clicking this box should toggle my border color between THREE colors repeatedly: first click causes dark green, second click causes dark purple, third click causes the original gold, then green, purple, gold, green, purple, gold, etc. Make your own variable to keep trck of the 'state'.</div>

CSS

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin:0;
	padding:0;
    -webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-highlight: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body{
    background: #ffeeee;
}

.buttons{
    background: #336600;
    border: .4em solid #cc9900;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1.5em 1em;
    border-radius: 1em;
    float: left;
    margin: 1em 1.5%;
    width: 30%;
    cursor: pointer;
}

.buttons span{
    color: #ffffcc;
    font-style: italic;
}

JavaScript

window.onload = init;
var stateTwo = false, colorsThree = ['#cc9900','#1e3a03','#611790'];

function init(){
    var btns = document.getElementsByClassName("buttons");
    btns[0].onmousedown = btns[0].onmouseup = funcOne;
    btns[1].onclick = funcTwo;
    btns[2].onclick = funcThree;
}

function funcOne(e){
    this.style.background = ( e.type == 'mouseup' )? '#336600' : '#bd270a';
}

function funcTwo(e){
    stateTwo = !stateTwo;
    this.style.borderColor = stateTwo ? '#0c1583' : '#cc9900';
}

function funcThree(){
    colorsThree.push( colorsThree.shift() );
    this.style.borderColor = colorsThree[0];
}