JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper-all">
    <div class="content-wrapper">
        <div class="example-div">
            <span>lorem ipsum first</span>
        </div>
    </div>
</div>

<div class="wrapper-all">
    <div class="content-wrapper">
        <div class="example-div">
            <span>lorem ipsum second</span>
        </div>
    </div>
</div>

CSS

.wrapper-all {
    margin-bottom:40px;
}
.example-div {
    padding:40px;
    background-color:#ecf0f1;
    text-align:center;
}
.btn {
    padding:8px 20px;
    background-color:#1abc9c;
    color:white;
    width:auto;
    cursor:pointer;
    margin:0 auto;
    text-align:center;
    text-transform:uppercase;
    transition:background-color 0.16s ease-in-out;
}
.btn:hover {
    background-color:#16a085;
}

pre {
    background-color:#34495e;
    color:white;
    margin:0;
}

JavaScript

//create button after div
$("<div class='btn'>show code</div>").insertAfter(".content-wrapper");
//create pre wrapper after button
$("<pre></pre>").insertAfter(".btn");
//hide the pre so can slidetoggle later
$("pre").hide();

$(".btn").one("click", function() {

  var cloned = $(this).prev().clone();
  var code = $(cloned).html().replace(/</g, "&lt;").replace(/>/g, "&gt;");
  $(this).next().append(code);

});

$(".btn").click(function() {
  $(this).next().slideToggle("fast", function() {
  });
});