JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div className="fixedMarcomFooter">
  <div className="callUs">
    <a href="tel: +99999999999">
            <i className="fa fa-phone" aria-hidden="true" />
            Call Us (999)-999-9999
          </a>
  </div>
  <div className="contactUs">
    <Link to="/contact-us" linkIsMarcom>
    <i className="fa fa-envelope" aria-hidden="true" />
    <span className="nonMobileText">Contact Us</span>
    <span className="mobileText">CONTACT</span>
    </Link>
  </div>
  <div className="liveChat">
    <Link to="/chat" linkIsMarcom>
    <i className="fa fa-users" aria-hidden="true" />
    <span className="nonMobileText">Start a Live Chat</span>
    <span className="mobileText">CHAT</span>
    </Link>
  </div>
</div>

SCSS

$color-white: white;
$color-turquoise-75: red;
$color-turquoise-48: blue;

.fixedMarcomFooter {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: $color-white;
  text-align: center;
  border-top: $px6 solid $color-turquoise-75;
  .callUs,
  .contactUs,
  .liveChat {
    display: inline-block;
    width: $px400;
    color: $color-turquoise-48;
    border-right: $px2 solid $color-turquoise-75;
    &:last-child {
      border-right: none;
    }
    &:hover {
      color: $color-white;
      background-color: $color-turquoise-48;
    }
    i {
      width: 25px;
      margin-right: 10px;
      @include bp-phone {
        width: auto;
        font-size: 25px;
        margin-bottom: 5px;
      }
    }
    a,
    a:hover {
      font-size: 25px;
      line-height: 30px;
      display: block;
      text-decoration: none;
      color: $color-turquoise-48;
      padding: $px20 0;
      &:hover {
        color: $color-white;
      }
      .mobileText {
        display: none;
        @include bp-phone {
          display: block;
          font-size: $phone-px10;
        }
      }
      .nonMobileText {
        display: inline-block;
        @include bp-phone {
          display: none;
        }
      }
      @include bp-phone {
        font-size: $phone-px13;
        padding: $phone-px15 0;
        border-right: $phone-px4 solid $color-turquoise-75;
        &:last-child {
          border-right: none;
        }
      }
    }
  }