JSFiddle - React, Tailwind, and code Playground

HTML

<div class="DateStyle"><span class="DateStyle_Date">21/01/2013</span><span class="DateStyle_Cross">x</span></div>
        
        <div class="DateStyle"><span class="DateStyle_Date">11/02/2012</span><span class="DateStyle_Cross">x</span></div>
        
        <div class="DateStyle"><span class="DateStyle_Date">08/05/2012</span><span class="DateStyle_Cross">x</span></div>

CSS

.DateStyle {
            display: inline-block;
            background-color: #4A4F54;
            color: #A4A7AA;
            font-weight: bolder;
            -moz-border-radius: 8px;
            border-radius: 8px;
            padding: 2px 6px 2px 8px;
            line-height: 1.2em;
        }
        .DateStyle_Red{
            background-color: #751919;
        }
        .DateStyle_Date {
            padding-right: 5px;
            border-right: #A4A7AA dashed 1px;
        }
        .DateStyle_Cross{
            padding-left: 4px;
            height: 15px;
        }
        
        .DateStyle:hover {
            background-color: #5C6165;
        }

JavaScript

$(document).ready(function() {
            $('.DateStyle_Cross').hover(function(){
                $(this).parent().css('background','#751919 ');
            }, function(){
                $(this).parent().css('background','#4A4F54');
            })
            $('.DateStyle').hover.css( 'cursor', 'crosshair' );
            $('.DateStyle_Cross').hover.css( 'cursor', 'crosshair' );
        });