JSFiddle - React, Tailwind, and code Playground

HTML

<div class="subscription-form">
<button type="submit" class="btn btn-subscription btn-block">
    <h4>Yes! I Want This Book <i class="fas fa-angle-double-down"></i></h4>
    <p>... and the 50% Coupon Discount Code!</p>
</button>
</div>

CSS

.subscription-form button.btn-subscription {
    background-color: #f0b911;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-right: 15px;
    margin-left: 15px;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;

}


.subscription-form button.btn-subscription:hover {
    background-color: #d9a70f;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
    color: red;
}


.subscription-form .header {
    font-weight: 700;
    text-transform: uppercase;
}

.subscription-form button.btn-subscription p {
}