JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="#"><i class="glyphicon glyphicon-calendar marketing"></i></a>
<h2 class="h2footer"><a href="#">Schedule an<br> Appointment</a></h2>
<p></p>
</div>
<div class="col-md-4">
<a href="#"><i class="glyphicon glyphicon-book marketing"></i></a>
<h2 class="h2footer"><a href="#">Forms</a></h2></div>
<p></p>
</div>
<div class="col-md-4">
<a href="#"><i class="glyphicon glyphicon-envelope marketing"></i></a>
<h2 class="h2footer"><a href="#">Contact</a></h2>
<p></p>
</div>
</div>
CSS
body {
background-color: grey;
}
.marketing {
background: #acb290; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #acb290 0%, #649173 99%, #649173 99%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #acb290 0%,#649173 99%,#649173 99%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #acb290 0%,#649173 99%,#649173 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#acb290', endColorstr='#649173',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
height: 200px;
width: 200px;
border-radius: 15%;
font-size: 140px;
color: rgba(7, 23, 18, 0.60);
text-align: center;
padding-top: 30px;
}
.col-md-4 {
text-align: center;
}
.glyphicon:hover {
color: rgba(255, 255, 255, 0.60);
}
.glyphicon-calendar {
padding-left: 10px;
}
.glyphicon-book {
padding-right: 10px;
}
.glyphicon-envelope {
padding-right: 1px;
}
.h2footer {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
text-decoration: none;
margin-top: 5px;
}
.h2footer a {
color: #000;
}
.h2footer a:hover {
color: white;
}
.h2footer a:hover {
text-decoration: none;
}