JSFiddle - React, Tailwind, and code Playground

by garretruh

HTML

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

<style>

body {margin:0; background-image: url(http://subtlepatterns.com/patterns/furley_bg.png); font-family: 'Gudea', sans-serif;}

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

#everything {z-index:100;}

#pagetitlebox {padding:5px 10px 5px 10px; margin-left:auto margin-right:auto; margin-top:100px;}

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

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

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

.buttontext {margin:0;}

#hi {height:100px; width:100px; background-color:blue;}
#hi:hover {background-color:green;}

</style>

<body>

<!-- <div id="wrapper"></div> -->

<div id="pagetitlebox"><h1 id="pagetitle">Welcome.</h1></div>

<div id="frontwrap">

    <div class="mainbutton"><h2 class="buttontext">This week</h2></div>
    
    <div class="mainbutton"><h2 class="buttontext">Last week</h2></div>

</div>

<div id="hi"></div>

</body>