JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<body>
    <div id="topbar" class="cool" />
    <!-- <button id="homebutton" value="Home" oncluck="activateTab('page 1')">-->
    <p id="titletext">Obec WebChat</p>
    <!-- <input type="image" id="homebutton" src="img/home.jpg" onclick="activateTab('page1')"/>-->
    <input type="button" id="homebuttont" value="home" onclick="activateTab('page1')" />
    </div>
    <div id="tabCtrl">
        <div class="block" id="page1" style="display: block;">
            <form>
                	<h1>Postcode: </h1>
                <input type="text" name="postcode" placeholder="1337 XD" maxlength="8">
                <br>
                <input type="submit" id="zoekbutton" value="Zoeken" onclick="activateTab('page2')">
        <div class="block" id="page2" heigth=100% style="display: block;">
            <details>
                <summary id="resultnaam">Sensire</summary>
                <p padding=5px>Organisatie omschrijving: Gezondheid, zorg en welzijn. Dat is waar Sensire voor staat. Wij ondersteunen mensen in alle levensfasen met zorg die nodig is om gezond te zijn en te blijven. Dat doen we altijd samen. Samen met onze klanten, samen met collega's en samen met andere organisaties. En altijd op een manier die bij ons past: persoonlijk en dichtbij. Organisatie URL: http://www.sensire.nl Chatspreekuur: Maandag 18:00-21:00 Dinsdag 18:00-21:00 Woensdag 18:00-21:00 Donderdag 18:00-21:00 Vrijdag 18:00-21:00</p>
            </details>
            <div class="block" id="iframeblock">
                <iframe src="http://webim.obec.local/" width=100% heigth=100%</iframe>
            </div>
    </div>
<!-- <ul class="cool">
      <li>
        <a href="javascript:activateTab('page1')">Tab 1</a>
      </li>
      <li>
        <a href="javascript:activateTab('page2')">Tab 2</a>
      </li>
      ...
    </ul>
  </body>
</html>

CSS

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    background: transparent;
}
body {
    -webkit-touch-callout: none;
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;
    /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;
    /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color: whitesmoke;
    background-image:linear-gradient(top, #eee 0%, #eee 51%);
    background-image:-webkit-linear-gradient(top, #eee 0%, #eee 51%);
    background-image:-ms-linear-gradient(top, #eee 0%, #eee 51%);
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(0.51, #eee));
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    width:90%;
}
#topbar {
    background: linear-gradient(to bottom, rgba(116, 135, 165, 1) 7%, rgba(1, 30, 72, 1) 50%);
    width: 100%;
    height: 46px;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    position: fixed;
    z-index: 1;
}
#titletext {
    color: white;
    font-size: 20px;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    position: fixed;
    text-transform: capitalize;
}
/*  text button */
 #homebuttont {
    font-size: 12px;
    font-weight: bold;
    position: relative;
    width: 80px;
    height: 100%;
    color: white;
    background: transparent;
    background: url(../img/menuH.sep.png) no-repeat right top;
    /*background-color: #11598c;
        background: -webkit-linear-gradient(top, #1985d0,#1468a2 3%,#0e4b75);
        background-image: linear-gradient(top, #1985d0,#1468a2 3%,#0e4b75);
        border-top-color:#092e47;*/
    /*border: 1px solid #061f31;*/
}
#homebuttont:hover {
    background-color: #445A78;
}
/*  image button */
...

JavaScript

function activateTab(pageId) {
    var tabCtrl = document.getElementById('tabCtrl');
    var pageToActivate = document.getElementById(pageId);
    for (var i = 0; i < tabCtrl.childNodes.length; i++) {
        var node = tabCtrl.childNodes[i];
        if (node.nodeType == 1) { /* Element */
            node.style.display = (node == pageToActivate) ? 'block' : 'none';
        }
    }
}