JSFiddle - React, Tailwind, and code Playground

by Matheus Castiglioni

HTML

<div class="news">
    <ul class="news-list">
        <li class="news-item">
            A
            <div class="news-summary">
                News A
            </div>
        </li>
        <li class="news-item">
            B
            <div class="news-summary">
                News B
            </div>
        </li>
        <li class="news-item">
            C
            <div class="news-summary">
                News C
            </div>
        </li>
    </ul>
</div>

CSS

.news-list {
    margin: 0;
    padding: 0;
}

.news-item {
    display: block;
    list-style: none;
    padding: 1rem;
}

.news-item:hover {
    background: #f2f2f2;
    cursor: pointer;
}

.news-item:hover > .news-summary {
    display: inline-block;
}

.news-summary {
    display: none;
    margin-left: 2rem;
}