JSFiddle - React, Tailwind, and code Playground

by lakshmipathi

HTML

<div class="fb fb__1">
  <div class="fb fb__1_2">
    <div class="fb fb__2_5">
      <!-- 2 -->
      <pre>HEADER</pre>

    </div>
    <div class="fb fb__2_6">
      <!-- 2 -->
      <pre>TOOLBAR</pre>

    </div>
  </div>
  <div class="fb fb__1_3">
    <div class="fb fb__3_9">
      <!-- 3 -->
      <pre>LEFT</pre>

    </div>
    <div class="fb fb__3_10">
      <!-- 3 -->
      <div class="fb fb__wrap">
        <div class="fb__frame">
          <div class="fb__view">
                        <iframe src="https://www.webminal.org/terminal/proxy/index/"  ></iframe>
          </div>
        </div>
      </div>

    </div>
    <div class="fb fb__3_11">
      <!-- 3 -->
      <pre>RIGHT</pre>

    </div>
  </div>
  <div class="fb fb__1_4">
    <div class="fb fb__4_7">
      <!-- 4 -->
      <pre>TOOLBAR</pre>

    </div>
    <div class="fb fb__4_8">
      <!-- 4 -->
      <pre>FOOTER</pre>

    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.fb__1 {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.fb__1_2 {
  display: flex;
  flex-direction: column;
}

.fb__1_3 {
  align-self: stretch;
  flex-grow: 1;
  display: flex;
}

.fb__3_10 {
  flex-grow: 1;
}

.fb__1_4 {
  display: flex;
  flex-direction: column;
}

.fb {
  border: 1px solid black;
}

.hidden {
  overflow: hidden;
}

.auto {
  overflow: auto;
}

.fb__frame {
  height: 100%;
  width: 100%;
  background: aliceblue;
}



iframe {
  height: 600px;
  width: 100%;
  overflow: auto;
}

JavaScript

var iframe_src = "http://quod.lib.umich.edu/cgi/i/image/image-idx?g=um-ic;page=searchgroup";

var $main = $(".fb__3_10");
var $wrap = $(".fb__wrap");
var $frame = $(".fb__frame");
var $view = $(".fb__view");
$wrap.height($main.height());
$wrap.width($main.width());
$view.width($frame.width());
$view.height($frame.height());

var $iframe = $("<iframe></iframe>").appendTo($view);
$iframe.width($view.width());
$iframe.height($view.height());
$iframe.attr('src', iframe_src);