JSFiddle - React, Tailwind, and code Playground

by cssGuy

HTML

<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi rem deleniti itaque qui cupiditate debitis voluptatibus enim vel soluta maiores quo assumenda? Id dolore fugit mollitia aut at atque. Reiciendis harum similique nemo assumenda nisi debitis dolores. Veniam ex nulla ducimus repellendus excepturi nemo deleniti nisi fugiat iure adipisci. Commodi quam soluta nesciunt doloribus cupiditate quae voluptatibus modi aspernatur. Nesciunt nam assumenda consectetur doloremque cumque amet maxime iure corporis nostrum veniam harum sed voluptates tenetur hic quae itaque quis odit iste modi ratione soluta laboriosam ad magnam vel saepe distinctio perferendis! Recusandae voluptas quo corporis commodi officia eligendi atque a at repellendus nemo ex ut libero tempore quia sed voluptates blanditiis vero tempora. Hic consequuntur voluptates illum natus incidunt possimus quae alias repellendus quibusdam doloremque quas reprehenderit minima. Quaerat assumenda eveniet totam in quae nam numquam accusantium commodi iusto eum? Ipsum praesentium nihil minus repudiandae possimus neque dolor voluptatum blanditiis et cum consequatur sint atque placeat qui veniam tenetur delectus ducimus non labore voluptatem fugit doloremque fugiat quidem minima voluptates! Magni quod distinctio nemo beatae et officiis dolorum suscipit. Commodi odit animi minus! Obcaecati cumque aspernatur reiciendis sit eligendi. Ratione ipsam quidem odio quas dolore unde architecto laudantium molestias voluptate ea iure nihil autem voluptas deleniti magnam asperiores dolores sunt voluptatum officia excepturi illum quisquam doloremque distinctio possimus ipsa reiciendis necessitatibus! Non molestiae quos nisi maiores blanditiis expedita laborum illo magni facilis molestias vero repudiandae dolorem dolorum ut fugiat omnis sequi maxime voluptates sunt optio dolores pariatur quis necessitatibus nam id labore consequatur. Fugit magni quibusdam quos quo vel...

CSS

/* CSS Multi-column Layout Module */

/* In M-C-L content can flow into multiple columns with a gap and a rule between them */
/* This layout module is very flexible and very useful in RWD */

/*
column-width, 
column-count, 
columns (shorthand), 
column-gap, 
column-rule,
column-fill(not working anywhere ATM),
column-span,
break-before,
break-after,
break-inside.... */
body{
    margin: 0;
    padding: 1em;
    border: 0.5em solid gainsboro;
    background-color: whitesmoke;
    color: silver;
    font-family: georgia,serif;
    font-size: 16px;
    line-height: 1.3;
    -webkit-column-width: 12em;
    -webkit-column-gap: 1.5em;
    -webkit-column-rule: dashed 1px #3a3a3c;
}
h1 {
    margin: 0 0 1em 0;
    color: #000;
    font-family: "Source Sans Pro",sans-serif;
    -webkit-column-span: all;
}
p {
    margin: 0;
}