JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<button class="paypal-button">
    <span class="paypal-button-title">
      Buy now with
    </span>
    <span class="paypal-logo">
      <i>Pay</i><i>Pal</i>
    </span>
  </button>

SCSS

.paypal {
  &-logo {
    font-family: Verdana, Tahoma;
    font-weight: bold;
    font-size: 26px;

    i:first-child {
      color: #253b80;
    }

    i:last-child {
      color: #179bd7;
    }
  }
  
  &-button {
    padding: 15px 30px;
    border: 1px solid #FF9933;
    border-radius: 5px;
    background-image: linear-gradient(#FFF0A8, #F9B421);
    margin: 0 auto;
    display: block;
    min-width: 138px;
    position: relative;
    
    &-title {
      font-size: 14px;
      color: #505050;
      vertical-align: baseline;
      text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
    }
    
    .paypal-logo {
      display: inline-block;
      text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
      font-size: 20px;
    }
  }
}