JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://www.rainmedia.com.au/impromptu/jquery-impromptu.css">
<script src="http://www.rainmedia.com.au/impromptu/jquery-impromptu.js"></script>
<div class="wrapper">
			<div class="header">
				<h1>jQuery Impromptu</h1> 

				

				<ul class="nav">

				</ul>
			</div>

			
<div class="example-container" id="TourExample">
	
<pre class="code" id="TourCode" style="display:none">var tourSubmitFunc = function(e,v,m,f){
			if(v === -1){
				$.prompt.prevState();
				return false;
			}
			else if(v === 1){
				$.prompt.nextState();
				return false;
			}
},
tourStates = [
	{
		title: 'Welcome',
		html: 'Ready to take a quick tour of jQuery Impromptu?',
		buttons: { Done: 2 },
		focus: 1,
		position: { container: 'h1', x: 200, y: 60, width: 200, arrow: 'tc' },
		submit: tourSubmitFunc
	}
];
$.prompt(tourStates);</pre>
	<div class="buttons">
		<button class="run">Run It!</button>
	</div>
</div>


				
			
		</div>

CSS

body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,dl,dt,dd,pre,blockquote,fieldset,label{
				margin:0;
				padding:0;
				border:0;
			}
			body{ background-color: #f8f7ec; border-top: solid 10px #777; font: 90% Helvetica, sans-serif; padding: 20px; }
			h1,h2,h3,h4{ margin: 10px 0; font-family: Plantin, "Plantin std", "Plantin", "Baskerville", Georgia, "Times New Roman", serif; font-weight: normal; }
			h1{font-size: 2.2em;margin: 0 0 20px 0; }
			h2{ background-color: #D95656; line-height: 18px; font-size: 18px; letter-spacing: 1px; padding: 5px 10px; margin: 10px 0 10px -60px; color: #fff; display: inline-block; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px; }
			h3{ color: #D95656; font-size: 18px; letter-spacing: 1px;  margin: 10px 0 10px -20px; }
			h4{ color: #777; font-size: 18px; letter-spacing: 1px; }
			p{ margin: 10px 0; line-height: 150%; }
			a{ color: #7b94b2; }
			ul,ol{ margin: 10px 0 10px 40px; }
			li{ margin: 4px 0; }
			dl{ margin: 10px 0; }
			dl dt{ font-weight: bold; line-height: 20px; margin: 10px 0 0 0; }
			dl dd{ margin: -20px 0 10px 120px; padding-bottom: 10px; border-bottom: solid 1px #eee;}
			pre{ font-size: 12px; line-height: 16px; padding: 5px 5px 5px 10px; margin: 10px 0; background-color: #e4f4d4; border-left: solid 5px #9EC45F; overflow: auto; }

			.wrapper{ background-color: #ffffff; width: 600px; border: solid 1px #eeeeee; padding: 20px 20px 20px 40px; margin: 0 auto; border-radius: 6px; -moz-border-radius: 6px;-webkit-border-radius: 6px; }
			.header{ text-align: center;position: relative; margin: 0 -20px 0 -40px; }
			.header ul{ margin: 10px 0; display: block; }
			.header ul li{ display: inline-block; list-style: none; margin: 10px 0; width: 100px; }
			.header ul li a{ text-transform: uppercase; color: #777; text-decoration: none; font-size: 12px; }
			.header ul li a:hover{ color: #555; }
			.header .tour{ color: #fff; background-color: #9ec45f; padding: 4px 10px; margin: 10px 0; font-size:...

JavaScript

$(function(){
				// quick routine for scrolling nav
				var $nav = $('.header ul'),
					navoffset = $nav.offset(),
					$navclone = $nav.clone().addClass('scrollnav').appendTo('.header'),
					$window = $(window);
				$window.scroll(function(e){
					if((navoffset.top+50) < $window.scrollTop()){
						if(!$navclone.hasClass('scrolled'))
							$navclone.addClass('scrolled');
					}
					else $navclone.removeClass('scrolled');
				}).scroll();

				// run the examples
				$('.example-container').each(function(i,el){
					var $ex = $(this),
						$run = $ex.find('.run'),
						code = $ex.find('.code').text();
					$run.click(function(e){
						e.preventDefault();
						(new Function(code))();
					});
				});

				// hotlink the tour
				$('#TourLink').click(function(e){
					e.preventDefault();
					$('#TourExample button').click();
				});
			});