JSFiddle - React, Tailwind, and code Playground

by beakie

HTML

<body>
        <div>
            Store Name
        </div>
        <div class="item-container">
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
     ...

CSS

.item-container {
                width: 1200px;
                height: 1200px;
                background-color: blue;
            }

            .item {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: red;
                border: 1px solid black;
            }

            .image {
                width: 100px;
                height: 100px;
                background-color: green;
            }

            .name {
                background-color: purple;
            }

            .quantity {
                background-color: orange;
            }