JSFiddle - React, Tailwind, and code Playground

HTML

<div class="service-text text2">  
  <p>
this is some text
  </p>
<a href="" class="button-learn centered"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>

  </div>

CSS

.service-text {
	margin:0;
	width:100%;
	height:auto;
    display:block;
	background-color:#34495e;
	-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.service p{
	margin:0;
	padding-top:5px;
	padding-bottom:10px;
	padding-right:7px;
	padding-left:15px;
	font-family:'PT Sans','Arial', 'Open Sans';	
	font-size:14px;
	line-height:22px;
	color:white;
	display: block;	position:relative;
	
}


.button-learn {
  margin: auto;
  position:relative;
  text-align: center;
  border-radius:4px;
  text-decoration: none;
  font-family:'PT Sans',helvetica;
  background: #69c773;
 
  font-size: 17px !important;
  padding: 10px 10px 10px 10px;
  color: #FFF;
}
.button-learn:hover {
  color: #51A65F;
}