JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<article>
    <ul>
        <li>
            <img src="http://beatsmaster.at.ua/_pu/0/s22715632.jpg" />
            <p>Britney Spears 1</p>
            <p>friends</p>
        </li>
        <li>
            <img src="http://beatsmaster.at.ua/_pu/0/s22715632.jpg" />
            <p>Britney Spears 2</p>
            <p>hashcode</p>
        </li>    
        <li>
            <img src="http://beatsmaster.at.ua/_pu/0/s22715632.jpg" />
            <p>Britney Spears 3</p>
            <p>girls</p>
        </li>    
         <li>
            <img src="http://beatsmaster.at.ua/_pu/0/s22715632.jpg" />
            <p>Britney Spears 4</p>
            <p>boys</p>
        </li>   
         <li>
            <img src="http://beatsmaster.at.ua/_pu/0/s22715632.jpg" />
            <p>Britney Spears 5</p>
            <p>trancemusic</p>
        </li>
    </ul>
</article>

CSS

p,ul,li { margin: 0px; padding: 0px; }
ul { list-style: none; }

img {
    display: block;
    width: 150px;
    height: 120px;
    border: 2px solid #ccc;
}

p {
    background: #ccc;
    text-align: center;
}

li {


}

ul {
    position: relative;
    display: inline-block;
}

article {
    background: #555;
    padding: 5px;
    display: inline-block;
}