JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="news-nav">
    <ul id="news-nav-container">

    <li id="news-item-1" class="news-item-container">
    <div class="news-item-info" id="news-item-info-1">
    <div class="news-title-description">
    <a href="http://www.singledays.nl/actueel/event_verslagen/2011/11/Dag_van_de_single_was_een_groot_succes" title="Dag van de single" class="news-item-link dag-van-de-single-after">
        <div class="news-item-thmb-image">
            <p><img src="http://www.singledays.nl/inc/images/spotlight/thumbs/thmb-dag-van-de-single-after.jpg" id="news-image-1" class="news-item-image" alt="Dag van de single"></p>
        </div>
        <section class="news-item-text-block">
            <h4 class="news-header">Dag van de single</h4>
            <p>Was een groot succes!</p>
        </section>
    </a>
    </div>
    <div class="news-meta"></div>
    </div><!-- end news item #1 -->

    <li id="news-item-2" class="news-item-container">
    <div class="news-item-info" id="news-item-info-2">
    <div class="news-title-description">
    <a href="https://www.facebook.com/SingleDays" title="Facebook actie" class="news-item-link facebook-like direct-link">
        <div class="news-item-thmb-image">
            <p><img src="http://www.singledays.nl/inc/images/spotlight/thumbs/thmb-facebook-like.jpg" id="news-image-2" class="news-item-image" alt="Facebook actie"></p>
        </div>
        <section class="news-item-text-block">
            <h4 class="news-header">Facebook actie</h4>
            <p>Like ons en win!</p>
        </section>
    </a>
    </div>
    <div class="news-meta"></div>
    </div><!-- end news item #2 -->

    <li id="news-item-3" class="news-item-container">
    <div class="news-item-info" id="news-item-info-3">
    <div class="news-title-description">
    <a href="http://www.singledays.nl/actueel/acties/2011/12/24h_Bakfiets_actie" title="Bakfiets Actie" class="news-item-link bakfiets-actie">
        <div class="news-item-thmb-image">
            <p><img...

CSS

div#news-titles{display:table;width:1100px;}
nav#news-nav,
div.news-item-image{
    display:table-cell;
    vertical-align:top;}
nav#news-nav{width:455px;}
ul#news-nav-container{list-style:none;}
li.news-item-container{
    margin-bottom:3px;}
li.news-item-container a{cursor:default !important;}
.active-news-item{visibility:visible !important;background:#CC2439 !important;}
.active-news-item{background:#CC2439 !important;}
.active-news-item{color:white !important;}
//li.news-item-container:hover div.news-meta{visibility:visible !important;}
//li.news-item-container:hover section.news-title-description a{color:white !important;}
div.news-title-description{display:table;
    width:455px;
    height:70px;
    position:absolute;
    background:#212020;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;}
div.news-title-description a{color:#555454;text-decoration:none;}
div.news-title-description h4{text-transform:uppercase;}
div.news-item-thmb-image,
section.news-item-text-block{display:table-cell;
    vertical-align:top;padding-top:5px;
    }
section.news-item-text-block h4{font:17pt/22pt LatoBlack;letter-spacing:-0.5pt;
    word-spacing:5pt;
    text-transform:uppercase;
    font-weight:normal;
    color:#555454;}
div.news-item-thmb-image{
    width:120px;
    padding:10px 0 5px 15px;}
div.news-meta{
    visibility:hidden;
    position:relative;
    left:455px;
    z-index:100;
    width:55px;
    height:70px;
    padding:5px 10px 5px 10px;
    background:#212020;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;}
span.datetime-day{
  font-size:40pt;
  letter-spacing:-7pt;
  font-weight:bold;
  display:block;
  line-height:31pt !important;}
span.datetime-month-year{
    display:block;
    letter-spacing:-1pt;
    line-height:normal !important;}
span.datetime-time{display:none;}

JavaScript

$(function(){
    $("ul#news-nav-container li").bind("mouseover click", function(event){
        event.preventDefault();
        if($(this).find('a').hasClass('direct-link') == true) var addClass = "popup";
        else var addClass = "normal";
        $('.news-title-description').add('.news-meta').add('.news-item-link').add('.news-header').removeClass('active-news-item');
        $(this).find('.news-title-description').add('.news-meta').add('.news-item-link').add('.news-header').addClass('active-news-item');
        var image = "http://www.singledays.nl/inc/images/spotlight/"+$(this).find('.news-item-link').attr('class').split(' ')[1]+".jpg";
        $('img#news-item-image').attr({
            src: image,
            title: $(this).find("a").attr("href"), 
            class: addClass
        });
    });
});