JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<button class="jp-simpl-button">
  <svg height="58" class="jp-simpl-button-logo" viewBox="0 0 58 58" width="58" xmlns="http://www.w3.org/2000/svg">
    <path d="M37.32 21.933l2.877-2.876-.626-.625c-5.04-5.043-13.247-5.043-18.29 0-4.832 4.833-5.03 12.568-.6 17.643l-2.876 2.875.625.625c5.042 5.043 13.247 5.043 18.29 0 4.832-4.832 5.03-12.567.6-17.642zm-14.79-2.25c4.144-4.144 10.76-4.344 15.142-.6l-1.64 1.64c-3.488-2.86-8.644-2.664-11.9.593-3.256 3.256-3.454 8.412-.594 11.9l-1.608 1.608c-3.743-4.382-3.542-11 .6-15.142zm12.94 18.642c-4.143 4.144-10.76 4.344-15.142.6l1.64-1.64c3.488 2.86 8.644 2.664 11.9-.593 3.256-3.256 3.454-8.412.594-11.9l1.608-1.608c3.743 4.382 3.543 10.998-.6 15.14z" fill="currentColor" fill-rule="evenodd"></path>
  </svg>
  <span class="jp-simpl-button-text">
    <span class="jp-simpl-button__text">Pay Later -     <i class="fa fa-inr" aria-hidden="true">₹300</i></span>
  </span>
</button>

CSS

.jp-simpl-button {
  box-shadow: 0 3px 12px rgba(0, 174, 239, 0.15);
  height: 39px;
  font-size: 14px;
  line-height: 39px;
  padding: 0;
  background: rgba(0, 174, 239, 1);
  border-radius: 3px;
  font-weight: 600;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border: 0;
  text-align: center;
  white-space: nowrap;
  outline: 0;
  width: 160px;
}

.jp-simpl-button-logo {
  background: rgba(0, 174, 239, 1);
  width: 39px;
  float: left;
  height: 39px;
  display: block;
}

.jp-simpl-button-text {
  position: relative;
  margin-left: 39px;
  text-align: center;
  height: 39px;
  display: block;
}

.jp-simpl-button__text {
  position: absolute;
  top: 0;
  left: -8px;
  width: 100%;
  height: 100%;
}