JSFiddle - React, Tailwind, and code Playground
HTML
<h2 class="service-style color_service">Annoyed</h2>
<!--start service-text-->
<div class="service-text text1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…
</p>
<a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div>
CSS
h2.service-style{
font-size:20px;
font-weight:400;
color:#fff;
font-family:'PT Sans','Arial', 'Open Sans';
text-align:center;
width:100%;
margin:0;
-moz-border-radius: 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.color_service {
background-color:#2ecc71;
}
.service-text {
margin:0;
width:100%;
height:auto;
padding-bottom:10px;
background-color:#34495e;
border-bottom:10px solid #2c3e50;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.service-text.text1:before{border-top-color:#2ecc71}
.service-text.text2:before{border-top-color:#e67e22}
.service-text.text3:before{border-top-color:#3498db}
.service-text:before{border-top: 30px solid;}
.service-text:before {
content:'';
position: absolute;
width: 0;
height: 0;
/*border-top: 30px solid #3498db;*/
border-right:30px solid transparent;
margin-top: 0px;
left: 15px;
display:inline-block;
}
.service p{
width:100%;
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;
text-align:center;
z-index:1;
display: inline-block; position:relative;
}
.button.button-large i{
font-style:normal;
font-weight:normal;
font-size:13px;
color:#fff;
margin-right:10px;
vertical-align:baseline;
}
a.button-large{
padding:15px 30px 14px 30px;
margin:0 0 5px 0;
}
a.button-large i{
font-style:normal;
font-weight:normal;
font-size:13px;
color:#fff;
margin-right:10px;
vertical-align:baseline;
}
/* --------------------------------------------------
:: Button Configuration
-------------------------------------------------- */
.button{
display:inline-block;
position:relative;
font-style:normal;
font-weight:normal;
font-family:"Open Sans";
...