JSFiddle - React, Tailwind, and code Playground

by denzdii

HTML

<div id="main">
    
<h2>Column count</h2>
<p id="multi-column1">Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas. </p>
<pre>
#multi-column1 
{
  -moz-column-count: 3;
  -webkit-column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  
  text-align: justify;
}    
</pre>


<br><br>


<h2>Column width</h2>
<p id="multi-column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>

<pre>
#multi-column2
{
  -moz-column-width: 200px;
  -webkit-column-width: 200px;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  
  text-align: justify;
}
</pre>


<br><br>

    
<h2>Column rules</h2>
<p id="multi-column2-bordered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat,...

CSS

body
        {
            margin: 0;
            padding: 10px;
            background: white;
        }
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: bold;
  src: local('PT Sans Narrow Bold'), local('PTSans-NarrowBold'), url('http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v1/Q_pTky3Sc3ubRibGToTAYiylde52zikAzebNtJS89aM.woff') format('woff');
}
body
{
 font-size: 62.5%;
 background: #ccc;
 color: #3a3a3a;
 font-family: Verdana, sans-serif;
}
            
body:before 
{
  content: "";
  position: fixed;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  z-index: 100;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.9);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.9);
  box-shadow: 0px 0px 10px rgba(0,0,0,.9);              
}

pre
{
  font: normal 1em/2em Tahoma, Arial, Helvetica;
  margin: 0.5em 0;
  padding: 1em;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  background: #f1f1f1 url(images/pre-grid.png);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  overflow: auto;
}

code
{
  font-family: 'Courier New', Courier, Fixed;
  background: #e1e1e1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  padding: 2px;
  white-space: nowrap;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

mark
{
  border-bottom: 2px solid #323232;
  background: #FFFFE0;
}

ins{
  text-decoration: none;
}


.info-block{
  padding: 20px !important;
  background: #fff6cd;
  border: 1px solid rgba(0,0,0,.1);
}

a
{
  color: #3151A2;
}

a:hover
{
  color: #CC0000;
}

::selection
{
  color: #fff;
  background-color: #dd3333;
  text-shadow: none;
}

::-moz-selection
{
  color: #fff;
  background-color: #dd3333;
  text-shadow: none;
}
h1, h2, h3, h4 {
    font-family: 'PT Sans...