JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="container">
    <div class="left">
        <div class="circle">
            asd
        </div>
        <div class="circle">
            asd
        </div>
        <div class="circle">
            asd
        </div>
        <div class="circle">
            asd
        </div>
        <div class="circle">
            asd
        </div>
        <div class="circle">
            asd
        </div>
        <div class="circle">
            asd
        </div>
        <div class="circle">
            asd
        </div>
        <div class="circle">
            asd
        </div>
   
    </div>
    
<div class="right">
asda
<div>
</div>

CSS

.container
{
    display:inline-block;
    background-color:red;
    width:100%;
    min-height:100px;
}

.left
{
    width:50%;
    float:left;
    background-color:blue;
}

.right
{
    width:50%;
    float:left;
    background-color:aqua;
}

.circle {
	border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
	width: 100px;
	height: 100px; 
    background-color:yellow;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    display:inline-block;
    margin-left:10px;
    margin-top:10px;
    margin-bottom:10px;
}