JSFiddle - React, Tailwind, and code Playground

by Ollie Crush

HTML

<script src="http://fonts.googleapis.com/css?family=Lobster+Two:400italic"></script>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400italic' rel='stylesheet' type='text/css'>
    
    
    <footer>
	    <div class="container">
            <div class="logo">
            tutorly
            </div>
            <div class="right">
                <div class="dropdown dropup">
				    <a href="#" class="dropdown-toggle helpmenu" data-toggle="dropdown">help <span class="caret"></span></a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li><a href="#">safety first</a></li>
                        <li><a href="#">how do I find a tutor?</a></li>
                        <li><a href="#">what does it cost?</a></li>
                        <li><a href="#">1-to-1 versus group class</a></li>
                        <li><a href="#">concierge service</a></li>
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">i'd like to tutor!</a></li>
                        <li><a href="#">background</a></li>
                        <li><a href="#">policies</a></li>
                        <li><a href="#">get in touch</a></li>	
                    </ul>
                </div>
            <button type="button" class="btn btn-default navbar-btn">register as tutor</button>
            </div>
        </div>
	</footer>

CSS

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 50px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: red;
  /* Set the fixed height of the footer here */
  height: 50px;
}

.logo {
	font-family: 'Lobster Two', cursive;
	font-style: italic;
    vertical-align: middle;
    display: table-cell;
    height: 50px;
    float: left;
	}

.right {
    float: right;
}

.helpmenu {
    color: white;
}
}