JSFiddle - React, Tailwind, and code Playground

by Arpad

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
    <div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
        <i class="fa fa-plus"></i>
    </div>
</div>
</div>

CSS

.fa-plus {
    margin: auto;
    font-size: 10em;
}
#add {
    border: 5px dashed black;
    border-radius: 25px;
    display: flex;
}

JavaScript

var add = $('#add'), plus = add.find('.glyphicon:first');
add.height(add.width());
plus.css({'font-size': add.width() / 2, 'padding': add.width() / 4});