JSFiddle - React, Tailwind, and code Playground

by Andy Bulka

HTML

<p class="fred">
hi there
</p>
<p class="mary">
hi there
</p>

<p class="price">
hi thereasd
</p>

<a href="https://gum.co/cssscan" class="but" target="_blank" rel="noopener noreferrer" style="margin-top: 2em;">
        <svg class="svg-inline--fa fa-download fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="download" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <i class="fas fa-download"></i> -->Get it now
      </a>

CSS

.fred {
  color: #333;
  font-family: CerebriSans-Bold,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  font-size: 3em;
  font-weight: 400;
  margin: 0 0 .15em;
  }
  
  .mary {
  color: #2cbc63;
  vertical-align: middle; 
  }
  .price {
    color: #333;
  font-family: CerebriSans-Bold,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  font-size: 3em;
  font-weight: 400;
  margin: 0 0 .15em;
  }
  
  .but {
    -webkit-box-shadow: rgba(0,12,32,.0392157) 0 0 1px 0,rgba(10,31,68,.0980392) 0 3px 4px 0;
  background-color: #2cbc63;
  border-radius: 50px;
  border-style: none;
  box-shadow: rgba(0,12,32,.0392157) 0 0 1px 0,rgba(10,31,68,.0980392) 0 3px 4px 0;
  color: #fff;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  margin-left: 0;
  margin-top: 2em;
  padding: 0 25px;
  text-decoration: none;
  transition: 250ms ease-in-out;
  will-change: transform;
  }