JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script>
	//initialize tooltips
	$(document).ready(function(){
    $('.my_button').tooltip();   
	});
</script>




<div class="my_button_row">


<a href="www.google.com" data-placement='bottom' data-toggle="tooltip" title="Some helpful text here!" class="my_button my_button_green">buttonnnnn</a>    
</div>

CSS

.my_button_row{
	height: 100px;
	border-bottom: 1px solid #E5E5E5;
    width: 500px;
    display: table;
 	border-collapse: separate;
	border-spacing: 20px 5px;    
}



.my_button {
	background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB;	border-radius: 34px;
    box-shadow: 4px 4px 4px #666;
    color: #FFF;
    font-size: 26px;
	padding: 10px 10px;
    text-decoration: none;
    display: table-cell;
    margin: 10px;
    white-space: normal !important;
    word-wrap: break-word;
    text-align: center;
    vertical-align: middle;
    height: 100px;
    max-width: 180px;
    min-width: 15%;
    line-height:26px
}


.my_button_green{
	background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}