JSFiddle - React, Tailwind, and code Playground

HTML

<iframe class="frame" id="zoome" name="content" height="700px;" frameborder="0" border="0" cellspacing="0" scrolling="no" src="./pages/1.html"></iframe>

<div id="menu">
 <ul>
    <li><a class="link" href="http://cienotes.droppages.com/17/17.html" target="content">Page 1</a></li>
    <li><a class="link"  href="http://cienotes.droppages.com/18/18.html" target="content">Page 2</a></li>
    <li><a class="link"  href="http://cienotes.droppages.com/19/19.html" target="content">Page 3</a></li>
    <li><button onclick="next()">Next Page</button></li>
    <li><button onclick="previous()">Previous Page</button></li>
 </ul>
    </div>

JavaScript

var pNum=1; 
var maxPage=100; 
function next(){ 
pNum++; 
if (pNum > maxPage) pNum=1; 
document.getElementById("zoome").src="./pages/"+pNum+".html"; 
} 
function previous(){ 
pNum--; 
if (pNum > maxPage) pNum=1; 
document.getElementById("zoome").src="./pages/"+pNum+".html"; 
}