JSFiddle - React, Tailwind, and code Playground

HTML

<button type="submit" class="profile-submit profile-submit-text" id="submit-text">Safe</button>

<button type="submit" class="profile-submit profile-submit-arrow" id="submit-arrow"></button>

CSS

.profile-submit {
  display: inline-block;
  height: 32px;
  padding: 0 0 0 0;
  border: #c1c1c1 1px solid;
  -border-radius: 4px;
  background: #ebebeb;
  background: -webkit-linear-gradient(#fcfcfc, #d2d2d2);
  background:    -moz-linear-gradient(#fcfcfc, #d2d2d2);
  background:      -o-linear-gradient(#fcfcfc, #d2d2d2);
  background:         linear-gradient(#fcfcfc, #d2d2d2);
  outline: 0;
  text-align: left;
}

.profile-submit:hover {
  cursor: pointer;
  background: #EEEEEE;
  background: -webkit-linear-gradient(#fff, #C9C9C9);
  background:    -moz-linear-gradient(#fff, #C9C9C9);
  background:      -o-linear-gradient(#fff, #C9C9C9);
  background:         linear-gradient(#fff, #C9C9C9);
}

.profile-submit:active {
  background: #E2E2E2;
}

.profile-submit-text {
  float: left;  
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  line-height: 30px;
  padding: 0 20px 0 20px;
  margin: 0;
  border-radius: 4px 0px 0px 4px;
}
.profile-submit-arrow {
  float: left;
  display: block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  padding: 0 0 0 16px;
  border-radius: 0px 4px 4px 0px;
  background: #ebebeb, url(/tpl/common/img/sprite-11.png) 13px -79px no-repeat;
  background: -webkit-linear-gradient(#fcfcfc, #d2d2d2), url(/tpl/common/img/sprite-11.png) 13px -79px no-repeat;
  background:    -moz-linear-gradient(#fcfcfc, #d2d2d2), url(/tpl/common/img/sprite-11.png) 13px -79px no-repeat;
  background:      -o-linear-gradient(#fcfcfc, #d2d2d2), url(/tpl/common/img/sprite-11.png) 13px -79px no-repeat;
  background:         linear-gradient(#fcfcfc, #d2d2d2), url(/tpl/common/img/sprite-11.png) 13px -79px no-repeat;
  border-left: #c1c1c1 1px solid;
}