JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div class="categoryBoxes">
    <div class="categoryBoxLine">
        <div class="oneCategoryBox">
            <div class="icon">
            <img src="https://cdn3.iconfinder.com/data/icons/yummicon-pro/100/002_Apple-512.png" height="32" width="32"></div>
            <div class="categoryTitle">
                <h3>Fruit</h3></div>
            <div class="level2">
            <ul>
                <li>Apple</li>
                <li>Orange</li>
                <li>Banana</li>
                </ul>
            </div>
        </div>
        <div class="oneCategoryBox">
            <div class="icon">
            </div>
            <div class="categoryTitle">
            </div>
            <div class="level2">
            <ul>
                <li>Apple</li>
                <li>Orange</li>
                <li>Banana</li>
                </ul>
            </div>
        </div>
        <div class="oneCategoryBox">
            <div class="icon">
            </div>
            <div class="categoryTitle">
            </div>
            <div class="level2">
            <ul>
                <li>Apple</li>
                <li>Orange</li>
                <li>Banana</li>
                </ul>
            </div>
        </div>

    </div>
</div>

CSS

.categoryBoxes {
    padding-top: 25px;
}

.categoryBoxLine {
    padding: 13px 0 40px 0;
}

.oneCategoryBox:first-child {
    padding-left: 0px;
}

.oneCategoryBox {
    float: left;
    width: 217px;
    padding-left: 30px;
}

.oneCategoryBox .icon {
    width: 60px;
    height: 32px;
    overflow: hidden;
}

.categoryTitle {
    height: 42px;
    overflow: hidden;
    margin-top: 13px;
}