JSFiddle - React, Tailwind, and code Playground

by spoike

HTML

<div class="icons" data-count="1">
    <div class="icon">
        <img src="https://lh5.ggpht.com/_XklY7dK6yGsYt53X15RIp7-tbdjWMwQwl_iUAcW-uSq_8zAprmywdn5DQfBHvxZurs1=w300" />
    </div>
</div>


<div class="icons" data-count="2">
    <div class="icon">
        <img src="https://lh5.ggpht.com/_XklY7dK6yGsYt53X15RIp7-tbdjWMwQwl_iUAcW-uSq_8zAprmywdn5DQfBHvxZurs1=w300" />
    </div>
    <div class="icon">
        <img src="https://lh6.ggpht.com/pG7ziaOc-_frJjWGm49wLAHv9P73WXKIfVgw423cGBLmwsjn8JWKbb2hzwHgV_4WO15F=w300" />
    </div>
</div>

<div class="icons" data-count="3">
    <div class="icon">
        <img src="https://lh5.ggpht.com/_XklY7dK6yGsYt53X15RIp7-tbdjWMwQwl_iUAcW-uSq_8zAprmywdn5DQfBHvxZurs1=w300" />
    </div>
    <div class="icon">
        <img src="https://lh6.ggpht.com/pG7ziaOc-_frJjWGm49wLAHv9P73WXKIfVgw423cGBLmwsjn8JWKbb2hzwHgV_4WO15F=w300" />
    </div>
    <div class="icon">
        <img src="http://d2q1fyx2rrj5ud.cloudfront.net/app-icons/com.android.phone.png" />
    </div>
</div>

<div class="icons" data-count="4">
    <div class="icon">
        <img src="https://lh5.ggpht.com/_XklY7dK6yGsYt53X15RIp7-tbdjWMwQwl_iUAcW-uSq_8zAprmywdn5DQfBHvxZurs1=w300" />
    </div>
    <div class="icon">
        <img src="https://lh6.ggpht.com/pG7ziaOc-_frJjWGm49wLAHv9P73WXKIfVgw423cGBLmwsjn8JWKbb2hzwHgV_4WO15F=w300" />
    </div>
    <div class="icon">
        <img src="http://d2q1fyx2rrj5ud.cloudfront.net/app-icons/com.android.phone.png" />
    </div>
    <div class="icon">
        <img src="https://lh5.ggpht.com/_XklY7dK6yGsYt53X15RIp7-tbdjWMwQwl_iUAcW-uSq_8zAprmywdn5DQfBHvxZurs1=w300" />
    </div>
</div>

<div class="icons" data-count="5">
    <div class="icon">
        <img src="https://lh5.ggpht.com/_XklY7dK6yGsYt53X15RIp7-tbdjWMwQwl_iUAcW-uSq_8zAprmywdn5DQfBHvxZurs1=w300" />
    </div>
    <div class="icon">
        <img src="https://lh6.ggpht.com/pG7ziaOc-_frJjWGm49wLAHv9P73WXKIfVgw423cGBLmwsjn8JWKbb2hzwHgV_4WO15F=w300" />
    </div>
    <div...

CSS

.icons {
    width: 150px;
    height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 10px;
    border: 1px solid black;
    margin: 10px;
    float: left;
}
.icons > .icon {
    order: 1;
    flex: 0 1 50%;
    align-self: auto;
}

.icons[data-count="1"] .icon:nth-child(1),
.icons[data-count="2"] .icon:nth-child(1),
.icons[data-count="3"] .icon:nth-child(1),
.icons[data-count="4"] .icon:nth-child(1),
.icons[data-count="5"] .icon:nth-child(1) {
    flex: 0 1 100%;
}

.icon > img {
    width: 100%;
}

.icons[data-count="4"] .icon:nth-child(2),
.icons[data-count="4"] .icon:nth-child(3),
.icons[data-count="4"] .icon:nth-child(4){
    flex: 0 1 33%
}