JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<div class="content"><div class="inner">
  
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam assumenda quia odit porro optio exercitationem perferendis velit molestiae accusamus quod fuga aspernatur id pariatur sunt alias quae, odio officiis libero veritatis aperiam quos similique a! Velit minus accusantium in nobis quos dolorem, illo vel laboriosam? Iste ipsam voluptatem maxime dolorum.</p>
  
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptate asperiores voluptatem ipsam error fugit ratione aspernatur excepturi. Pariatur debitis consequatur ab ratione vel optio, provident dolorem aperiam laboriosam atque enim, maiores fuga soluta? Consequatur, culpa eos pariatur sed, vel nesciunt nihil ipsam illum laboriosam ea sunt animi! In dolorem excepturi veniam eaque eligendi tempore aspernatur animi! Quo sed quis totam natus officiis tenetur fuga nulla. Culpa quod distinctio, quos amet quia minus tenetur doloremque est enim officia in consequatur facere accusamus eligendi rerum quasi nobis quas, cum fuga magnam sed quidem nostrum perferendis! Minus ullam sed provident? Sit aut officiis nesciunt eligendi accusamus perferendis repellat reprehenderit, natus voluptatibus, deserunt neque illum fugiat reiciendis nostrum, consectetur nemo iure dolorum ipsam possimus expedita eveniet beatae. Voluptatum eligendi deleniti quos minima inventore incidunt ab magnam amet culpa dicta, beatae id praesentium quod nam nesciunt doloribus. Animi dicta deserunt odio. Possimus fuga modi accusantium suscipit provident voluptate soluta distinctio explicabo quam temporibus, molestias sint unde reprehenderit quaerat cum rem velit eos doloremque. Reprehenderit velit ut voluptatem corrupti fugiat fugit hic dicta laboriosam repudiandae voluptates. Ducimus molestiae unde fuga labore, vel harum sapiente illum ipsa reprehenderit eos fugit tempore voluptas numquam autem debitis facilis ratione, qui impedit voluptatem atque quaerat totam. At...

CSS

.content{
  
  
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f0da+0,fdffff+100 */
background: rgb(242,240,218); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,240,218,1) 0%, rgba(253,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(242,240,218,1) 0%,rgba(253,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(242,240,218,1) 0%,rgba(253,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f0da', endColorstr='#fdffff',GradientType=0 ); /* IE6-9 */


background-attachment: fixed;
  
}

.inner{
  padding:50px;
  background:url(http://www.llumac.cat/iconpics/f/13/137139/wavy-line-png.png) repeat-y center;
}

p{
  margin:50px; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f0da+0,fdffff+100 */
background: rgb(242,240,218); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,240,218,1) 0%, rgba(253,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(242,240,218,1) 0%,rgba(253,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(242,240,218,1) 0%,rgba(253,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f0da', endColorstr='#fdffff',GradientType=0 ); /* IE6-9 */


background-attachment: fixed;
}

table{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f0da+0,fdffff+100 */
background: rgb(242,240,218); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,240,218,1) 0%, rgba(253,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(242,240,218,1) 0%,rgba(253,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,...