JSFiddle - React, Tailwind, and code Playground

by bestblue4you

HTML

<div class="container join_club">
	<div class="text-center">
		<span class="title">
		<h3>Join our new service, click to...</h3>
			</span>
        <div class="col-md-4 col-md-offset-4 take_me_to">
            <div class="arrow_box_join">
                <p><a href="/enrollment" title="Click to Join">Join now</a> </p>
            </div>
	    </div>
	</div>
</div>

CSS

.span-text {
  text-align: center;
  color: #848484;
  font-size: 15px;
  font-size: 1.5rem; }
  .span-text span {
    display: block;
    line-height: 22px; }

.join_club h3 {
  font-family: Lato;
  font-weight: normal;
  color: #F25E5E;
  font-size: 30px;
  font-size: 3rem;
  border-bottom: 1px solid #F25E5E;
  padding-bottom: 21px;
  margin-bottom: 15px; }

.arrow_box_join {
  width: 100%;
  height: 85px;
  position: relative;
  background: #F25E5E;
  font-family: Lato; }
  .arrow_box_join p {
    font-size: 35px;
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    height: 85px;
    line-height: 80px; }
    .arrow_box_join p > a {
      font-weight: normal;
      font-size: 30px;
      font-size: 3rem;
      line-height: 50px;
      color: #fff;
      text-decoration: none;
      text-transform: uppercase; }

.arrow_box_join:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #F25E5E;
  border-width: 63px;
  border-top-width: 39px;
  margin-left: -63px; }

.join_club {
  margin-bottom: 45px; }

JavaScript

$('.take_me_to').click(function(){
    window.location.href = $(this).find('a').attr('href')
});