JSFiddle - React, Tailwind, and code Playground

by Phellipe Lins

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<footer class="resizable">
    <div class="footer-container">
        <div class="footer-item">
            <span class="align-center glyphicon glyphicon-arrow-left"></span>
        </div>
        <div class="footer-item">
            <span class="align-center glyphicon glyphicon-arrow-up"></span>
        </div>
        <div class="footer-item">
            <span class="align-center glyphicon glyphicon-arrow-down"></span>
        </div>
        <div class="footer-item">
            <span class="align-center glyphicon glyphicon-arrow-right"></span>
        </div>
    </div>
    
</footer>

CSS

footer {
    width: 100%;
    height: 50px;
    border: 1px solid black;
}

.footer-container {
    min-width: 300px;
    height: 50px;
    margin: 0 auto;
    border: 1px solid red;
}

.footer-item {
    height: 48px;
    width: 25%;
    float: left;
    position: relative;
    background-color: lightgray;
    border-left: 1px solid darkgray;
}

.align-center {
    position: absolute;
    top: 36%;
    left: 36%;
}

JavaScript

$(function() {
    $( ".resizable" ).resizable();
  });