JSFiddle - React, Tailwind, and code Playground

by jordanlewis

HTML

<!doctype html><html lang="en">
<head>
<title>CSS Display Table</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
    <div class="tabular">
        <div class="tabular-row">
            <div class="tabular-cell">
                 display: table-cell;
            </div>
            <!--end tabular cell-->
            <div class="tabular-cell">
                 display: table-cell;
            </div>
            <!--end tabular cell-->
            <div class="tabular-cell">
                 display: table-cell;
            </div>
            <!--end tabular cell-->
        </div>
        <!--end tabular row-->
        <div class="tabular-row">
            <div class="tabular-cell">
                 display: table-cell;
            </div>
            <!--end tabular cell-->
            <div class="tabular-cell">
                 display: table-cell;
            </div>
            <!--end tabular cell-->
            <div class="tabular-cell">
                 display: table-cell;
            </div>
            <!--end tabular cell-->
        </div>
        <!--end tabular row-->
    </div>
    <!--end tabular-->
</div>
<script src="js.js"></script>
</body>
</html>

CSS

body {
    margin:0;
    padding:0;
    background:#FFF;
    font-family:Segoe UI;
    color:#505050;
}
#wrapper {
    margin:50px auto;
    width:800px;
}
div .tabular {
    display:table;
    border:#505050 solid 1px;
    padding:5px;
}
div .tabular-row {
    display:table-row;
}
div .tabular-cell {
    display:table-cell;
    border:#737373 solid 1px;
    padding: 5px;
}