JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<a href="day1.html"><div><h1>day 1</h1></div></a>
<a href="day2.html"><div><h1>day 2</h1></div></a>
<a href="day3.html"><div><h1>day 3</h1></div></a>
<a href="day4.html"><div><h1>day 4</h1></div></a>
<a href="finalday.html"class=""><div><h1>final day</h1></div></a>

CSS

a{
text-decoration:none;
color:green;
}
a:hover{
text-decoration:none;
color:blue;
}
a:visited{
text-decoration:none;
color:green;
background-color:red;
}
div{
font-family:Garamond;
border:3px solid blue;
width:75px;
height:45px;
margin:3px;
a:nth-child(5) div{
border-color:red;
}
.multi{
border-image: -webkit-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
border-image: -ms-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
border-image: -moz-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
width:120px
}

JavaScript

$(document).ready(function() {
    $("div").hover(function(){
        $(this).toggleClass("multi");
    }
});