JSFiddle - React, Tailwind, and code Playground

by neilsarkar

HTML

<div class="box">    
    <div class="nested">Hi I'm some words. If I get too long for the box I'm in, I'll wrap automatically.</div>
</div>

<div class="box">
    I'm another box. There are invisible margins between us that you can see by using the web inspector.
</div>

<div class="box alignment clearfix">
    <div class="floated">Putting boxes</div>
    <div class="floated">on the same horizontal line</div>
    <div class="floated">is hard.</div>
    <div class="floated">Floats work, but need a clearfix</div>
</div>

<div class="box alignment">
    <table>
        <tr>
            <td>Tables work.</td>
            <td class="vertical-center">And they even let you center vertically.</td>
            <td>But they need a whole lot of extra markup.</td>
            <td>And they're so 1999.</td>
        </tr>
    </table>
</div>

<div class="box alignment">
    <div class="inline-block">display: inline-block is almost perfect.</div>
    <div class="inline-block">so very close.</div>
    <div class="inline-block">but! it doesn't account for</div>
    <div class="inline-block">the size of html spaces</div>
</div>

<div class="box alignment relative known-height">
    <div class="absolute one">absolute positioning works</div>
    <div class="absolute two">and is precise</div>
    <div class="absolute three">but takes control</div>
    <div class="absolute four">away from the browser's natural layout</div>
</div>

<div class="box alignment flexbox">
    <div>Then there's the future.</div>
    <div>The future is flexbox.</div>
    <div>All hail flexbox.</div>
</div>

CSS

* { border: 1px solid black; box-sizing: border-box; font-family: Helvetica; }
.box { margin: 15px; background-color: goldenrod; padding: 10px; }

.nested { background-color: white; }

.alignment { background-color: pink; border-style: dashed; }
.clearfix:after { content: ""; display: table; clear: both; }

.floated { width: 25%; float: left; }

.relative { position: relative; }
.known-height { margin-bottom: 60px; } 
.absolute { position: absolute; width: 25%; }
.one { top: 0; left: 0; }
.two { top: 10px; left: 27%; width: 18%; }
.three { top: 0; left: 50%; }
.four { top: 0; left: 75%; }

.inline-block { display: inline-block; width: 25%; }

.table { display: table; width: 100%;}
.table-cell  { display: table-cell; width: 25%; }

.flexbox { display: flex; }