JSFiddle - React, Tailwind, and code Playground

by SnackyPete

HTML

<div class="centered">
    <p>Hello World</p>
    <p></p>
    <p>It's a fine day!</p>
</div>
<div class="container">
    <div class="fixed-width">Fixed 1</div>
</div>
<div class="container">
    <div class="fixed-width">Fixed 2</div>
</div>

<div class="fixed-width">Fixed 2</div>
<div class="flex-width">Flex
    <p>Flex</p>
    <p>Flex</p>
    <p>Flex</p>
    <p>Flex</p>
    <p>Flex</p>
    <p>Flex</p>
</div>

CSS

.centered {
    background-color: cyan;
    margin: 0 auto 0 auto;
    width: 50%;
}
.container {
    background-color: blue;
    margin: 0 auto 0 auto;
    width: 50%
}
.fixed-width {
    background-color: red;
    margin: 0 auto 0 auto;
    width: 100px;
}
.flex-width {
    background-color: green;
    margin: 0 auto 0 auto;
    width: 50%;
}