JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <ul id="inner">
        <li>
            <div>
                <p>Test text</p>
                <p>Test text</p>
                <img src="http://whitenoisecd.org/wp-content/themes/thesis/rotator/sample-1.jpg" />
            </div>
            <a href="http://google.com"><span></span></a>
        </li>
        <li>
            <div>
                <p>Test text</p>
                <p>Test text</p>
                <img src="http://whitenoisecd.org/wp-content/themes/thesis/rotator/sample-1.jpg" />
            </div>
            <a href="http://google.com"><span></span></a>
        </li>
    </ul>
</div>

CSS

#wrap {
    height: 120px;
}
#inner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 240px;
    height: 100px;
    overflow: hidden;
    padding: 10px 0px;
}
    #inner li {
        position: relative;
        float: left;
        margin: 0px 5px;
        padding: 0px 5px;
        width: 98px;
        height: 98px;
        border: 1px solid #CCC;
    }
    #inner li:hover {
        border-color: #000;
    }
        #inner li div {
            position: relative;
            z-index: 8;
        }
            #inner li div p {
                text-size: 13px;
                line-height: 20px;
            }
            #inner li div img {
                width: 80px;
                height: 50px;
            }
    #inner li a {
    
    }
        #inner li a span {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 9;
        }