JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circles-container">
            <div class="row">
                <div class="cell">
                    <div class="circle">
                        <span>TEXT</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="circle">
                        <span>TEXT</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="big-circle circle">
                        <span>TEXT</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="circle">
                        <span>TEXT</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="big-circle circle">
                        <span>TEXT</span>
                    </div>
                </div>
            </div>
        </div>

CSS

body, html {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .circles-container{
                display: table;
                border-spacing: 40px;             
            }
            .row {
                display: table-row;
            }
            .circle {
                width: 100px;
                height: 100px;
                border: 1px solid #000;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;
                display: table-cell;
            }
            .cell {
                display: table-cell;
            }
            .big-circle {
                width: 300px;
                height: 300px;
            }