JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<div class="store-category">
    <div class="category-title">Albums</div>
    <ul class="product-item">
        <li class="product-name">txt1</li>
        <li>photo</li>
        <li class="product-download">Coming soon</li>
        <li class="product-download">Release date: 000-00-00</li>
    </ul>
    <ul class="product-item">
        <li class="product-name"    >txt1</li>
        <li><img src="http://www.punkbunny.com/_img/music/devil's-poison_160x160.jpg" /></li>
        <li class="product-download">Download at <img src="http://store.punkbunny.com/images/itunes.png" /></li>
        <li class="product-download">Buy CD at </li>
    </ul>
    <ul class="product-item">
        <li class="product-name"    >txt1</li>
        <li class="product-download">txt2</li>
        <li class="product-download">txt3 <img src="http://store.punkbunny.com/images/itunes.png" /></li>
        <li class="product-download">txt4 <img src="http://store.punkbunny.com/images/cdbaby.png" /></li>
    </ul>
    <br/>
    <ul class="product-item">
        <li class="product-name"    >txt1</li>
        <li class="product-download">txt2</li>
        <li class="product-download">txt3</li>
        <li class="product-download">txt4</li>
    </ul>
</div>
<div class="store-category">
    <div class="category-title">Merch</div>
    <ul>
        <li>txt1</li>
        <li>txt2</li>
        <li>txt3</li>
        <li>txt4</li>
    </ul>
    <ul>
        <li>txt1</li>
        <li>txt2</li>
        <li>txt3</li>
        <li>txt4</li>
    </ul>
    <ul>
        <li>txt1</li>
        <li>txt2</li>
        <li>txt3</li>
        <li>txt4</li>
    </ul>
    <br/>
    <ul>
        <li>txt1</li>
        <li>txt2</li>
        <li>txt3</li>
        <li>txt4</li>
    </ul>
</div>

CSS

/*
http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell
*/
 div.store-category>ul {
    display: inline-block;
    list-style-type: none;
}
.category-title {
    font-weight: bold;
    text-align: center;
}

.product-item {
    font-family: Arial, Sans-serif;
    font-size: 1.0em;
}
.product-name {
    font-style: italic;
}
.product-download {
    color: red;
}
.product-download>img {
    vertical-align: middle;
}