HTML/CSS - Abandoned | Tabbed Code Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
<body>
<p id="head">
I put three of My Code then combined it to one code
</p>
    <ul class="tab">
        <li><a href="#" class="link active" onclick="openTab(event,'page1')">Display Date</a></li>
        <li><a href="#" class="link" onclick="openTab(event,'page2')">Move Animation </a> </li>
        <li><a href="#" class="link" onclick="openTab(event,'page3')">Uppercase Field </a> </li>
    </ul>
<div id="page1" class="content">
<p>Click "Try it" to display the date.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
</div>
<div id="page2" class="content">
<style>

css

ul.tab
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid  #ccc;
    background-color:  #f1f1f1;
}
ul.tab li 
{
    float: left;
    border-right: 1px solid  #ccc;
}
ul.tab li a 
{
    display: inline-block;
    color:  black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover 
{
    background-color:  #ddd;
}

function openTab(evt, page) 
{
    var i, pages, links;
    //hide all pages
    pages = document.getElementsByClassName("content");
    for (i = 0; i < pages.length; i++) {
        pages[i].style.display = "none";
    }
    //remove active tab
    links = document.getElementsByClassName("link");
    for (i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" active", "");
    }
    //set active page and tab
    document.getElementById(page).style.display = "block";
    evt.currentTarget.className += " active";
}

BROWSER

Console