JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div id="holder">
	<h3 style="text-align:center">Topics</h3>

    <ul>
        <li><a class="a" href="javascript:void(0);">News</a></li>
        <li><a class="b" href="javascript:void(0);">Sports</a></li>
        <li><a class="c" href="javascript:void(0);">Weather</a></li>
    </ul>
    
    <div class="content">
        <div class="contenta">
            <b>News</b><p>text</p>
        </div>
        <div class="contentb">
            <b>Sports</b><p>text</p>
        </div>
        <div class="contentc">
            <b>Weather</b><p>text</p>
        </div>
    </div>

CSS

body {
    font-size:16px;
    font-family:sans-serif;
}
ul {
    background:#333;
    padding:20px;
    border-radius:3px;
}
li {
    display:inline;
    margin:5px;
}
li a {
    color:#fff;
    padding:20px 15px;
}
li a:hover {
    color:#ff6600;
}
li:after {
    content:'|';
}
#holder {
    float:left;
    width:350px;
}
.contenta {
    background:#f7f7f7;
    clear:both;
}
.contentb, .contentc {
    display:none;
    background:#f7f7f7;
    clear:both;
}
.content {
    background:#f7f7f7;
    clear:both;
    padding:20px;
}
b {
    border-bottom:dotted 1px #333;
}
img {
    max-width:100px;
    float:left;
    padding:20px 20px 20px 0;
}

JavaScript

$('.a, .b, .c').mouseover(function () {
    $('.content'+$(this).attr("class")).show().siblings().hide();
});