JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div class="example">
  <div class="btn">Button</div>
  <div class="btn btn-green">Button</div>
  <div class="btn">
    <span>Hello</span>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: Open Sans;
}

.btn {
  background: red;
  color: white;
  text-align: center;
  padding: 10px;
}

.btn.btn-green {
  background: green;
}

.example-container {
  border: 2px solid black;
  position: relative;
}

.example-expand {
  position: absolute;
  top: 0;
  right: 0;
}

.example-expanded {
  padding-left: 10px;
}

JavaScript

$(".example").each(function() {
	var $this = $(this);
	$this.wrap($("<div>").addClass("example-container"));
  var $container = $this.parent();
  var $expanded = $("<pre>").addClass("example-expanded").text($this[0].innerHTML.replace(/\n  /g, "\n").replace("\n", "")).hide();
  var $button = $("<div>").addClass("example-expand").text("</>").on("click", function() {
  	$expanded.fadeToggle();
  });
  $container.prepend($button);
  $container.append($expanded);
})