JSFiddle - React, Tailwind, and code Playground

by kryo

HTML

<div class="m-pretty-wrapper">

    <!-- Sample Header DIV -->
    <div class="m-header m-fixed-width">
        <div class="m-ct-inner">My Header</div>
    </div>
    
    <!-- Sample IFRAME -->
    <iframe class="m-iframe m-fixed-width" id="m-iframe" src="http://jsfiddle.net/kryo/evkDx/embedded/"></iframe>
    
    <!-- Sample Footer DIV -->
    <div class="m-footer m-fixed-width">
        <div class="m-ct-inner">My Footer</div>
    </div>

</div>

CSS

body {
  font-family: "Trebuchet MS";
}
.m-fixed-width {
  font-size: 0.8em;
  display: block;
}
.m-ct-inner {
  padding: 10px 15px;
  font-size: 1.3em;
  text-align: left;
}
.m-iframe {
  height: 300px;
  border: none;
  padding: 0px;
  margin: 0 auto;
  width: 100%;
}
.m-pretty-wrapper {
  padding: 10px;
  background: black;
  text-align: center;
}
.m-header {
  background: gray;
  color: white;
  border-bottom: 1px solid black;
}
.m-footer {
  background: gray;
  color: white;
  border-top: 1px solid black;
}