JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <main class="container">
        <div class="row">
            
            <div class="col">Sparky</div>
            <div class="col">Vegeta</div>
            <div class="col">Flufferpants</div>
        </div>
    </main>
    <script src="test.js"></script>
</body>
</html>

CSS

* {
    font-size: 25px;
    /* box-sizing: border-box; */
}




body {
    background-color: gray;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: lightgoldenrodyellow;
}

.row {
    background-color: rgb(119, 103, 134);
    width: 100%;
}

.col {
    display: inline-block;
    width: 33%;
    height: 200px;

}