JSFiddle - React, Tailwind, and code Playground

by Robert Herring

HTML

<div class="container">    
    <div class="ui-widget g1">Just</div>
    <div class="ui-widget g1">some</div>
    <div class="ui-widget g2">ramdom</div>
    <div class="ui-widget g2">text</div>
    <div class="ui-widget g3">with</div>
    <div class="ui-widget g2">diferent</div>
    <div class="ui-widget g1">worlds</div>
    <div class="ui-widget g3">sizes</div>
    <div class="ui-widget g2">because</div>
    <div class="ui-widget g2">I</div>
    <div class="ui-widget g1">want</div>
    <div class="ui-widget g3">to</div>
    <div class="ui-widget g2">demonstrate</div>
    <div class="ui-widget g2">my</div>
    <div class="ui-widget g1">problem</div>
    <div class="ui-widget g1">with</div>
    <div class="ui-widget g2">flex</div>
    <div class="ui-widget g2">elements</div>
    <div class="ui-widget g3">and</div>
    <div class="ui-widget g1">cornering</div>
    <div class="ui-widget g2">those</div>
    <div class="ui-widget g3">elements</div>
    <div class="ui-widget g1">potatoes</div>
    <div class="ui-widget">:)</div>
</div>
<br/>
Click on those buttons below to change the container
<div class="buttons">
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
</div>
<div id="debug"></div>
<div id="mouse"></div>

CSS

.container {
    display: flex;
    flex-wrap: wrap; 
    border-radius: 10px;
    overflow:hidden;
    border: 1px solid #000;
}

.ui-widget {
    flex: auto;
    white-space: nowarp;
    padding: 5px;
    background: gray;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
}
.ui-corner-br { 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    -khtml-border-bottom-right-radius: 10px; 
    border-bottom-right-radius: 10px;
    background: green;
}
.ui-corner-bl { 
    -moz-border-radius-bottomleft: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -khtml-border-bottom-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    background: green;
}
.ui-corner-tr { 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -khtml-border-top-right-radius: 10px; 
    border-top-right-radius: 10px; 
    background: green;
}
.ui-corner-tl { 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px; 
    -khtml-border-top-left-radius: 10px; 
    border-top-left-radius: 10px; 
    background: green;
}
.buttons {
    display: flex;
}
button {
    font-size: 48px;
    flex: auto;
    margin: 10px;
}