JSFiddle - React, Tailwind, and code Playground

HTML

<title>Test</title>

<div class="body_wrap">

<div class="main_outer">   
 	<div class="main_top"></div>
    <div class="main_mid">

        <!-- content -->

        <div id="bookcontent">
             <center>
           <div id="content">
 
       
        
<div id="menu">

    <div class="titleimg"></div>
 <ul>
    <li><a class="link" href="./pages/0.html" target="content">Test 1</a></li>
     <li><a class="link"  href="./pages/1.html" target="content">Test 2</a></li>
     <li><a class="link"  href="./pages/2.html" target="content">Test 3</a></li>
 </ul>

    </div>
  
 <div id="menu"> This is the iFrame </div>
 
                      <div id="menu2">        
       <span align="right"><input class="buttons" type = "button" value = "Previous" /></span>
    <span style="float:left"><input class="buttons" type = "button" value = "Next" /> </span>
                        
               </div> 

        <!--/ content -->
 </div> 
    

    <div class="main_bot"></div>
    

<!--/ container -->

CSS

/*============================================================================================*/
/* 1. GENERAL TYPOGRAPHY */
/*============================================================================================*/
/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/ 

body {background:url(../img/body_image_1.png)  top no-repeat}

html, body, div, span, iframe,pre, a, img, strong, center, ul, li, footer, header,menu {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
 footer, header, menu {
	display: block;}
body {
	line-height: 1; }
ol, ul {
	list-style: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }

img { max-width:100% !important}

/*----------------------------------------------*/
/* General Styles */
/*----------------------------------------------*/
body {
	font-family: 'Copse', Georgia, Times, serif;
	color:#8c8c8c;
	font-size:14px;
	line-height:1.4em;
	position:relative}
	
.body_wrap {
	width:100%;
	
	background-position:center 270px;
	background-repeat:no-repeat;
	overflow:hidden;}

::-moz-selection { 
	background: #f67320;
	color: #fff;
	text-shadow: none}
	
::selection {
	background: #f67320;
	color: #fff;
	text-shadow: none}



/* Typography
======================================================== */
strong { font-weight: bold; }

	
.sidebar mark {
	background:#ffffff;
	color:#ff8a00 !important;
	display:block;
	padding:5px;
	font-weight:normal;
	font-size:110%;}
	

/* Links 
======================================================== */
a, a:visited { color: #aa62bb; text-decoration: none; outline:none; }
a:hover, a:focus { color: #f86000; }

/* Lists
======================================================== */
ul { list-style: none outside; }



/*============================================================================================*/
/* 2....