JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<link href="" rel="stylesheet" type="text/css" />

<div>
    <span id="red">red</span>
    <span id="green">green</span>
    <span id="yellow">yellow</span>
    <span id="blue">blue</span>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit adipiscing hendrerit. Sed tincidunt, leo non consequat sagittis, nulla arcu varius magna, feugiat fermentum lectus felis a quam. Donec non elit et felis malesuada fringilla. Suspendisse purus neque, dictum ac porttitor et, lobortis sit amet nunc. Nam ut orci non erat sollicitudin gravida. Nunc mi libero, rhoncus a placerat vitae, congue at neque. Morbi aliquet auctor velit a elementum. Aliquam nec massa eu ipsum posuere euismod. Suspendisse at turpis sed metus adipiscing aliquam. Pellentesque dui urna, vestibulum quis pharetra eu, cursus in purus. Sed commodo eleifend orci vel ultrices. In hac habitasse platea dictumst. Duis urna felis, scelerisque id rhoncus quis, sollicitudin eu diam.</p>
<p>Etiam non leo quam. Cras eget mi urna. Sed sed purus quis turpis fringilla cursus. Phasellus sit amet felis neque, ut aliquam felis. Sed ut dui felis. Maecenas tincidunt, ante id ultrices aliquet, nunc ligula dictum nisl, in fermentum turpis elit vitae arcu. Sed interdum dignissim gravida. Curabitur nec pulvinar nibh. Sed sed arcu urna. Donec fermentum purus nec ipsum tempus egestas. Ut urna lectus, cursus eu malesuada ac, cursus nec velit. Nunc adipiscing blandit mi, pulvinar hendrerit nibh mollis vel.</p>
<p>Maecenas euismod consequat nisl non pulvinar. Sed sed velit vitae sapien dapibus facilisis a vitae tellus. Ut vel nibh nec mauris mollis pretium quis id tortor. Maecenas vulputate sem eget arcu commodo tristique. Suspendisse consectetur venenatis consectetur. Curabitur enim est, tristique id pulvinar vitae, vehicula in odio. Sed eros augue, pulvinar eget dictum a, dapibus eget mi. Suspendisse luctus turpis non eros pulvinar facilisis. Phasellus mauris lacus, tincidunt vel venenatis eu, luctus quis...

CSS

div{width:60px; background-color:#ccc; border:1px solid #333; float:left; position:fixed; top:10px; left:10px;}
span{float:left; clear:both; margin:2px; text-align:center; width:56px; background:#e4e4e4;}

p{margin-left:75px;}

JavaScript

$('span').click(function(){$('link').attr('href','http://ajthomas.co.uk/stackoverflow-help/styles-'+$(this).attr('id')+'.css')});