JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div class="entry">Text</div>
<div class="entry"></div>
<div class="entry "></div>
<div class="entry "></div>
<div class="entry "></div>
<div class="entry "></div>
<div class="entry "></div>

CSS

body{
 background-color:#555;
}
@font-face
{
    font-family: NeoSans;
    src: url('http://mywidget.tv/ktv/kartina/font/NeoSansPro-Regular.ttf');
}

.orange{
    color:#000;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,122,0,1)), color-stop(50%,rgba(220,100,0,1)), color-stop(100%,rgba(165,75,0,1))); /* Chrome,Safari4+ */
    
background: -webkit-linear-gradient(top,  rgba(250,122,0,1) 0%,rgba(220,100,0,1) 50%,rgba(165,75,0,1) 100%); /* Chrome10+,Safari5.1+ */
    

    
}

.entry{
    font-family: NeoSans;
    color:#fff;
    height:20px;
    width: 400px;
    background-color:#222;
    margin:5px;
    box-shadow: 2px 2px 5px #222;
    padding:10px;
}

JavaScript

$(document).ready(function(){
    $(".entry")
        .mouseover( function(){
            this.classList.add("orange");
        })      
        .mouseout( function(){
            this.classList.remove("orange");
        });
});