JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="redCon">
<div class="redSquare">
This is a test <a href="http://www.linkedin.com">LINKEDIN</a>
</div>
</div>

<a class="output">OUTPUT HTML</a>

<xmp class="outputCon"></xmp>

CSS

.redSquare { width:200px; height:200px; background:red; color:#fff; text-align:center; }
.output { display:inline-block; background:green; padding:10px; color:#fff; margin:10px 0; }
.redSquare a { color:#fff; }

JavaScript

$('.output').click(function () {
    	$('.outputCon').css('display', 'block');
    	var $code = $('.redCon').html();
    	$('.outputCon').text($code);
      $('.outputCon').html($code.replace('test', 'dog'));
      $('.outputCon').html($code.replace('http://www.linkedin.com', 'http://www.google.com'));
});