JSFiddle - React, Tailwind, and code Playground

by klenwell

HTML

<div class="group original wpb_wrapper">
  <h4>Original</h4>
  <a href="https://anastamos.chapman.edu/index.php/issues/issue-1/" target="_self" style="color: rgb(232, 201, 95); border-color: rgb(232, 201, 95); background-color: rgba(0, 0, 0, 0);" class="original eltd-btn eltd-btn-huge-full-width eltd-btn-outline eltd-btn-custom-hover-bg eltd-btn-custom-border-hover eltd-btn-custom-hover-color eltd-btn-hover-outline"
  data-hover-bg-color="#e8c95f" data-hover-color="#ffffff" data-hover-border-color="#ffffff">
    <span class="eltd-btn-text">Issue 1: Fear</span>
    <span class="eltd-btn-helper" style="background-color: #e8c95f"></span>
  </a>
</div>

<hr />

<div class="group samples">
  <h4>Restyle</h4>

  <a href="https://anastamos.chapman.edu/index.php/issues/issue-1/" class="sample" data-hover-bg-color="#e8c95f" data-hover-color="#ffffff" data-hover-border-color="#ffffff">
    <span class="anastamos-issue">Issue</span>
    <span class="anastamos-issue title">Fear</span>
    <span class="anastamos-issue number">001</span>
  </a>
</div>

CSS

/* Global */

body {
  font-family: Lato, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

div.group {
  margin: 25px;
}

a {
  text-decoration: none;
  vertical-align: baseline;
}


/* Original */

a.original {
  font-style: normal;
  font-weight: 700;
  padding: 18px 60px;
  border: 2px solid #ff7348;
  display: block;
  font-size: 18px;
  line-height: 1.7em;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .05em;
}


/* Restyles */

a.sample {
  position: relative;
  display: block;
  color: #e8c95f;
  padding: 18px 60px;
  border: 1px solid #e8c95f;
  font-family: Montserrat, Lato, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7em;
  letter-spacing: .05em;
}


/* Source: http://stackoverflow.com/a/19464014/6763239 */

a.sample:before {
  background: none;
  border: 1px solid #e8c95f;
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
}

span.anastamos-issue {
  color: black;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .2em;
  vertical-align: middle;
}

span.anastamos-issue.title {
  padding: 0 20px;
  color: #e8c95f;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.7em;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .05em;
}

span.anastamos-issue.number {
  padding-right: 2em;
}