JSFiddle - React, Tailwind, and code Playground

by Brian Witte

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<body class="main_background">
        <div class="container">
            <div class="row top_row">
                <div class="col-md-12 text-right login_row "><p><a class="front_links" href="/login">login</a></p>
                </div>
            </div>
        </div>
        <div class="container main_buttons">


            <div class="row entry" id="first_button">
                
                <div class="col-md-12">
                    <a href='/login/' class='found text-center btn-block center-block'>Found a cat?</a>
                </div>
                
            </div>


            <div class="row entry">
                
                <div class="col-md-12">
                    <a href='/location/' class='looking text-center btn-block center-block'>Looking for a cat?</a>
                </div>
                
            </div>
            <div class="row entry" id="join">
                <a href='/new_user' class='front_links text-center center-block'>Play hide and seek with us!</a>
            </div>
        </div>
        <div class="container">
            <div class="row bottom-row">
                <div col="col-md-12">
                    <a class='about front_links text-center center-block' href="/about">Who are we?</a>
                </div>
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="{% static 'catfinder/js/bootstrap.min.js' %}"></script>
    </body>

CSS

body{
    height: 100%;
}

.top_row {
    height: 4em;
}

.main_buttons {
    height: 40em;
   
}
.main_buttons .entry a {
    width: 50%;
}

#join {
    margin-top: 1em;
}
#first_button {
    margin-top: 20%;
}

.login_row {
    height: 100%;
}

.front_links {
    font-size: 1.5em
}

.main_background {
     background-color: #aa9966;
}
.found {

   border: 2px solid #596323;
   background: #99522e;
   background: -webkit-gradient(linear, left top, left bottom, from(#d18132), to(#99522e));
   background: -webkit-linear-gradient(top, #d18132, #99522e);
   background: -moz-linear-gradient(top, #d18132, #99522e);
   background: -ms-linear-gradient(top, #d18132, #99522e);
   background: -o-linear-gradient(top, #d18132, #99522e);
   background-image: -ms-linear-gradient(top, #d18132 0%, #99522e 100%);
   padding: 20px 40px;
   -webkit-border-radius: 14px;
   -moz-border-radius: 14px;
   border-radius: 14px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   text-shadow: #41647a 0 1px 0;
   color: #010e17;
   font-size: 2em;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.found:hover {
   border: 2px solid #333816;
   text-shadow: #41647a 0 1px 0;
   background: #99522e;
   background: -webkit-gradient(linear, left top, left bottom, from(#cc6600), to(#99522e));
   background: -webkit-linear-gradient(top, #cc6600, #99522e);
   background: -moz-linear-gradient(top, #cc6600, #99522e);
   background: -ms-linear-gradient(top, #cc6600, #99522e);
   background: -o-linear-gradient(top, #cc6600, #99522e);
   background-image: -ms-linear-gradient(top, #cc6600 0%, #99522e 100%);
   color: #010e17;
   text-decoration: none;
   }
.found:active {
   text-shadow: #41647a 0 1px 0;
   border: 2px solid #333816;
   background:...