JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<dl>
    <dt>"Tonight Show" (NBC)</dt>
    <dd class="SteveAllen">1954 - 1957 Steve Allen</dd>
    <dd class="JackPaar">1957 - 1962 Jack Paar</dd>
    <dd class="JohnnyCarson">1962 - 1992 Johnny Carson</dd>
    <dd class="JayLeno">1992 - 2009 Jay Leno</dd>
    <dd class="ConanOBrien">2009 - 2010 Conan O'Brien</dd>
    <dd class="JayLeno">2010 - 2014 Jay Leno</dd>
    <dd class="JimmyFallon">2014 - <span/> Jimmy Fallon</dd>
</dl>

<dl>
    <dt>"Late Night" (NBC)</dt>
    <dd class="DavidLetterman">1982 - 1993 David Letterman</dd>
    <dd class="ConanOBrien">1993 - 2009 Conan O'Brien</dd>
    <dd class="JimmyFallon">2009 - 2014 Jimmy Fallon</dd>
    <dd class="SethMeyers">2014 - <span/> Seth Meyers</dd>
</dl>

<dl>
    <dt>"Late Show" (CBS)</dt>
    <dd class="DavidLetterman">1993 - 2015 David Letterman</dd>
    <dd class="StephenColbert">2015 - <span/> Stephen Colbert</dd>
</dl>

<dl>
    <dt>"Late Late Show" (CBS)</dt>
    <dd class="TomSnyder">1995 - 1999 Tom Snyder</dd>
    <dd class="CraigKilborn">1999 - 2004 Craig Kilborn</dd>
    <dd class="span/>Craig Ferguson">2005 - <span/> Craig Ferguson</dd>
</dl>

CSS

@import url(http://fonts.googleapis.com/css?family=Merriweather:700);

body {
    font-size: 24px;
    width: 480px;
    margin: 0 auto;
}
span:before {
    content: '2000';
    color: transparent;
}
dl {
    margin-bottom: 2em;
}

dt {
    font-family: 'Merriweather';
    font-weight: bold;
    font-size: 1.25em;
}

dd.hover {
    background: #ddb;
    cursor: pointer;
    border-radius: 3px;
}

JavaScript

$('dd').on('mouseover', function() {
    $('dd.hover').removeClass('hover');
    $('.' + $(this).attr('class')).toggleClass('hover');
});