JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css' />
</head>
<body>

<!-- <div id="wrapper"></div> -->
<div class="titlewrap">
<div id="pagetitlebox"><h1 id="pagetitle">Welcome.</h1></div>

<div id="frontbuttons">

    <a href="#tevents"><div class="mainbutton but1"><h2 class="buttontext">This week</h2></div></a>
    
    <div class="mainbutton"><h2 class="buttontext">Last week</h2></div>

</div>
</div>

<div id="tevents" class="bottomup">

</div>

</body>

CSS

body {margin:0; background-image: url(http://subtlepatterns.com/patterns/furley_bg.png); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; cursor:default; width:100%; height:100%; -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; }}

h1, h2 {font-weight:100; margin-top:0;}

p {font-weight:200; margin:0;}

a {cursor:default;}

#wrapper {height:100%; width:100%; background:-webkit-radial-gradient(#788FAB,#435676); opacity:.5; position:absolute; top:0; left:0; z-index:1;}

.titlewrap {position:relative; top:30%;}

#pagetitlebox {padding:5px 10px 5px 10px;}

#pagetitle {text-align:center; display:block;}

.mainbutton {padding:10px; margin-top:0px; background-color:grey; display:inline-block; color:black;}

.mainbutton:hover {-webkit-box-shadow: inset 0 0 10px #000000;}

.buttontext {margin:0;}

#frontbuttons {text-align:center; display:block;}

#tevents {position:absolute; bottom:0; left:0; width:100%; height:0; background-color:grey;}

#tevents:target {height:80%;}

#tevents:target<body.titlewrap {top:0;}

.bottomup {-webkit-transition: height 2s ease-in-out;}