JSFiddle - React, Tailwind, and code Playground

by cssGuy

HTML

<div id="block">Display Block</div>
<div id="flex">Display Flex</div>
<div id="grid">Display Grid</div>
<div id="table">Display Table(I need width: 100%; to be full width of parent or viewport)</div>
<div id="list-item">Display List-item</div>
<div id="compact">Display Compact(Not working)</div>
<div id="run-in">Display Run-in(Not working)</div>

<div id="inline">Inline</div>
<div id="inline-block">Inline-Block</div>
<div id="inline-flex">Inline-Flex</div>
<div id="inline-grid">Inline-Grid</div>
<div id="inline-table">Inline-Table</div>
<div id="initial">Initial</div>
<div id="inherit">Inherit</div>
<div id="none">Totaly invisible</div>

CSS

* {margin: 0;padding: 0;font-weight: bold;color: #eeefff;font-family: arial;}
body {font-size: 0;}
div {font-size: 1rem;}
/* Block like layout */
#block {display: block;background-color: gold;}
#flex {display: flex;background-color: navy;}
#grid {display: grid; background-color: cyan;}
#table {display: table;background-color: magenta;}
#list-item {display: list-item;background-color: khaki;}
#compact {display: compact;background-color: red;}
#run-in {display: run-in;background-color: blue;}
/* Inline like layout (there is a small whitespace between inline elements which I removed)*/
#inline {display: inline;background-color: orange;}
#inline-block {display: inline-block;background-color: darkkhaki;}
#inline-flex {display: inline-flex;background-color: green;}
#inline-grid {display: inline-grid;background-color: skyblue;}
#inline-table {display: inline-table;background-color: brown;}

/* Special cases */
#initial {display: initial;background-color: purple;}
#inherit {display: inherit;background-color: aquamarine;}
#none {display: none;}