JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="wallpapers">
    <li>
        <a href="#" class="image"></a>
        <ul class="links">
            <li><a href="#">1280 x 1024</a></li>
            <li><a href="#">1024 x 768</a></li>
            <li><a href="#">800 x 600</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="image"></a>
        <ul class="links">
            <li><a href="#">1280 x 1024</a></li>
            <li><a href="#">1024 x 768</a></li>
            <li><a href="#">800 x 600</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="image"></a>
        <ul class="links">
            <li><a href="#">1280 x 1024</a></li>
            <li><a href="#">1024 x 768</a></li>
            <li><a href="#">800 x 600</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="image"></a>
        <ul class="links">
            <li><a href="#">1280 x 1024</a></li>
            <li><a href="#">1024 x 768</a></li>
            <li><a href="#">800 x 600</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="image"></a>
        <ul class="links">
            <li><a href="#">1280 x 1024</a></li>
            <li><a href="#">1024 x 768</a></li>
            <li><a href="#">800 x 600</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="image"></a>
        <ul class="links">
            <li><a href="#">1280 x 1024</a></li>
            <li><a href="#">1024 x 768</a></li>
            <li><a href="#">800 x 600</a></li>
        </ul>
    </li>
</ul>

CSS

.wallpapers>li {
    float:left;
    margin:10px;
}
.wallpapers .image {
    height:220px;
    width:250px;
    background:silver;
    border:solid 3px #cecece;
    display:block;
}
.wallpapers .links {
    text-align:center;
    font-size:12px;
}
.wallpapers .links li {
    display:inline;
    padding:0 2px 0 4px;
}
.wallpapers .links li+li {
    border-left:solid 1px black;
}