JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<div id="container">
    <section id="main">
        <div class="inside">
            <article id="liste" class="mod_article block">
                <div class="mod_cataloglist block">
                    <div class="layout_simple">
                        <div class="item first even">
                            <div class="item odd">
                            one
                            </div>
                            <div class="item even">
                            two
                            </div>
                            <div class="item odd">
                            three
                            </div>
                            <div class="item even">
                            four
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>

        <div class="insidebottom">
        </div>
        <div id="clear">
        </div>

    </section>
</div>

CSS

#main .inside {
    display: block;
    float: left;
    margin-left: auto;
    margin-right: auto;
    min-height: 350px;
    padding-left: 40px;
    padding-right: 40px;
}

#main .mod_article {
    float: left;
}
.block {
    overflow: hidden;
}

.mod_cataloglist::after {
    clear: both;
}
.mod_cataloglist {
    clear: both;
    display: block;
    float: left;
    margin-left: auto;
    margin-right: auto;
}

.mod_cataloglist .layout_simple::after {
    clear: both;
}
.mod_cataloglist .layout_simple {
    display: block;
    overflow: hidden;
}