JSFiddle - React, Tailwind, and code Playground

by koenpunt

HTML

<div id="logo">
    <div class="logo-row">
        <div class="logo-box">
            
        </div>
        <div class="logo-box top-right">
            
        </div>
        <div class="logo-box">
            
        </div>
        <div class="logo-box top-right">
            
        </div>
    
        
        <div class="logo-box top-right">
            
        </div>
        <div class="logo-box top-right">
            
        </div>
        
        <div class="logo-box top-left la-rge">
            
        </div>
    </div>
    <div class="logo-row">
        <div class="logo-box">
            
        </div>
        <div class="logo-box bottom-right">
            
        </div>
        <div class="logo-box">
            
        </div>
        <div class="logo-box bottom-right">
            
        </div>
        <div class="logo-box bottom-left">
            
        </div>
        <div class="logo-box">
            
        </div>
        
        <div class="logo-box bottom-right">
            
        </div>
    </div>
</div>

CSS

body{
    padding: 28px 0 0 102px;
}

#logo{
    
}

.logo-row{
    clear: left;
}
.logo-box{
    float: left;
    margin: 0 3px 3px 0;
    width: 50px;
    height: 50px;
    background-color:#000;
}

.logo-box.large{
    width: 500px;
    height: 500px;
}

.logo-box.top-right{
    border-top-right-radius: 90% 100%;
}

.logo-box.top-left{
    border-top-left-radius: 100% 90%;
}

.logo-box.bottom-left{
    border-bottom-left-radius: 100% 90%;
}

.logo-box.bottom-right{
    border-bottom-right-radius: 100% 90%;
}