JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<div id="example1" class="example">BLOCK vs INLINE-BLOCK
  <div class="wrapper"><span>Click to change <code>display</code> style.</span>
    <br/>
    <div class="inlinedemo aninput" onclick="changeDisplay(this)"></div>
    <div class="inlinedemo aninput" onclick="changeDisplay(this)"></div>
    <div class="inlinedemo aninput" onclick="changeDisplay(this)"></div>
    <div class="inlinedemo aninput" onclick="changeDisplay(this)"></div>
  </div>
</div>
<div id="example2" class="example">BOX-SIZING
  <div class="wrapper">
    <div class="marginborderpadding">margin + border + padding</div>
    <div class="width300px"><code>width: 300px;</code>
    </div>
    <div class="marginborderpadding">margin + border + padding</div>
    <div class="margin30px">margin</div>
    <div class="width300px"><code>width: 300px;</code>
    </div>
    <div class="margin30px">margin</div>
    <div>
      <div id="contentbox">This is a standard div, the width of this div is only the content. This div has a width of 300px.
        <div class="cssdiv">CSS
          <br/><code>div {
                    <br/>&nbsp; &nbsp;box-sizing: content-box;
                    <br/>&nbsp; &nbsp;width: 300px;
                    <br/>}</code>

        </div>It's hard to make a layout with a div with <code>box-sizing: content-box;</code> because then you need to take the margin, border and padding into account.</div>
      <div id="borderbox">This is a div that has <code>box-sizing: border-box;</code>. The width of this div is from the left border to the right border (borders itself included). This div has a width of 300px.
        <div class="cssdiv">CSS
          <br/><code>div {
                    <br/>&nbsp; &nbsp;box-sizing: border-box;
                    <br/>&nbsp; &nbsp;width: 300px;
                    <br/>}</code>

        </div>A div with <code>box-sizing: border-box;</code> is easier to work with because only the margin isn't included in the width.</div>
    </div>
  </div>
</div>
<div...

CSS

.inlinedemo {
  display: inline-block;
  /*NOT IMPORTANT, SOME EXTRA STYLE*/
  width: 250px;
  margin: 2px;
  padding: 2px;
  font: initial;
  border: 2px solid black;
}

#contentbox {
  box-sizing: content-box;
  margin: 30px;
  margin-top: 0px;
  border: 30px solid black;
  padding: 30px;
  width: 300px;
  /*NOT IMPORTANT, JUST SOME STYLE*/
  font: initial;
  display: inline-block;
  vertical-align: top;
}

#borderbox {
  box-sizing: border-box;
  margin: 30px;
  margin-top: 0px;
  border: 30px solid black;
  padding: 30px;
  width: 300px;
  /*NOT IMPORTANT, JUST SOME STYLE*/
  font: initial;
  display: inline-block;
}

.marginborderpadding {
  margin: 0px;
  padding: 2px;
  width: 90px;
  font: initial;
  text-align: center;
  word-break: break-word;
  box-sizing: border-box;
  display: inline-block;
  background-color: yellow;
}

.width300px {
  margin: 0px;
  padding: 2px;
  width: 300px;
  font: initial;
  text-align: center;
  word-break: break-word;
  box-sizing: border-box;
  display: inline-block;
  background-color: red;
}

.margin30px {
  margin: 0px;
  padding: 2px;
  width: 30px;
  font: initial;
  text-align: center;
  word-break: break-word;
  box-sizing: border-box;
  display: inline-block;
  background-color: green;
}

.width400px {
  width: 400px;
  margin: 0px;
  padding: 5px;
  box-sizing: content-box;
  border: 2px solid black;
  font: initial;
}

.borderbox {
  box-sizing: border-box;
}

#honderdprocent {
  width: 100%;
  margin: 0px;
  padding: 3px;
  border: 2px solid black;
  box-sizing: border-box;
  word-break: break-word;
}

.nofloat {
  float: none;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
}

.floatleft {
  float: left;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
}

.bggreen {
  background-color: green;
}

.bgred {
  background-color: red;
}

.bgblue {
  background-color: blue;
}

#sizingdiv {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background-color: yellow;
}

#voorbeeld1 {
 ...

JavaScript

$(document).ready(function() {
  changeDisplay($(".inlinedemo"));
  var inputclicked = false;
  $(".example").click(function() {
    if (inputclicked == false) {
      var visible = $(this).children().css("visibility");
      if (visible == "hidden") {
        $(this).children().css("visibility", "visible");
        $(this).css("height", "inherit");
      } else {
        $(this).children().css("visibility", "hidden");
        $(this).css("height", "18px");
      }
    }
  });
  $(".oef").click(function() {
    if (inputclicked == false) {
      var visible = $(this).children().css("visibility");
      if (visible == "hidden") {
        $(this).children().css("visibility", "visible");
        $(this).css("height", "inherit");
      } else {
        $(this).children().css("visibility", "hidden");
        $(this).css("height", "18px");
      }
    }
  });
  $(".aninput").mouseenter(function() {
    inputclicked = true;
  });
  $(".aninput").mouseleave(function() {
    inputclicked = false;
  });
});

var noinline = "This is a standard div, a standard div doesn't want elements next to it. <div class='cssdiv center'>CSS<br/><code>div { display: block; }</code></div>";
var hasinline = "This is a div that is set to an inline-block, with this the div can have elements next to it.<div class='cssdiv center'>CSS<br/><code>div { display: inline-block; }</code></div>";

function changeDisplay(obj) {
  var displayval = $(obj).css("display");
  if (displayval == "block") {
    displayval = "inline-block";
    $(obj).html(hasinline);
    $(obj).css("background-color", "lightgreen");
  } else {
    displayval = "block";
    $(obj).html(noinline);
    $(obj).css("background-color", "darkgrey");
  }
  $(obj).css("display", displayval);
}

function changeWidth() {
  $("#changemywidth").css("width", $("#changehiswidth").val() + "px");
}

function resizeDiv() {
  var newWidth = $("#newWidth").val();
  var newHeight = $("#newHeight").val();
  $("#sizingdiv").animate({
    "width":...