JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="css/footer.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<div class="fixed-bottom footer_fixed d-flex justify-content-center pt-3 pb-3">
        <p class="mx-0 m-0 text-center">
            <i class="fas fa-phone pr-1"></i>
            <a href="tel:+1234567890" class="pr-3">
                +1 234 456 7890
            </a>
            <span class="static-email">
                <i class="fas fa-envelope pl-3 pr-1"></i>
                <a href="mailto:[email protected]">
                    [email protected]
                </a>
            </span>
            <ul class="social-network social-circle m-0 ml-3">
                        <li><a href="https://www.facebook.com/" target="_blank" class="icoFacebook" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="https://twitter.com/" target="_blank" class="icoTwitter" title="Twitter"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="https://www.linkedin.com/company/" target="_blank" class="icoLinkedin" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a></li>
                        <li><a href="https://www.instagram.com/" target="_blank" class="icoInstagram" title="Instagram"><i class="fab fa-instagram"></i></a></li>
            </ul>
        </p>
 </div>
</body>
</html>

CSS

/*---------- Footer -----------*/

/*
.footer
{
    background-color: #343a40;
    background:url("../images/footer_background_full.jpg");
    background-size: 100% auto;
    margin-top:30px;
}

.footer_overlay
{
    position: relative;
    background-color: #212529;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
*/




.footer
{
  color: white;
  padding-top: 44px; 
  background-color: rgb(243,243,243);
}

.footer a
{
  color: rgb(138,138,138);
  
}

.footer a:hover
{
  color:#fb875c
}


.footer .menu-items a
{
  padding-bottom: 15px;
}


.appstore_soon_image_wrapper
{
  max-width: 140px;
  max-height: 50px;
}

.appstore_soon_image_wrapper img
{
  width: 100%;
  height: 50px;
  object-fit: contain;
}

.footer_img
{
  width:155px;
  height:45px;
}

.back_to_top a
{
  color: #ff8b5a;
}

.copyrights_wrapper
{
  border-top: 1px solid #666;
}

.p_copyright
{
  color: #C0C0C0;

}

ul.social-network {
  list-style: none;
  display: inline;
  padding-left: 0;
  padding-right: 0;
}

ul.social-network li {
  display: inline;
  /* margin: 0 3px; */
}

.social-circle li a {
  display:inline-block;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  /*border: 1px solid #C0C0C0; */
  text-align: center;
  width: 30px;
  height: 30px;
  font-size: inherit;
  background-color: transparent;
}

.social-circle li i {
  margin:0;
  /*line-height:30px;*/
  line-height:25px;
  text-align: center;
  color: #C0C0C0;
}

/* color of social icons on hover */
.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoLinkedin:hover i,
.social-network a.icoInstagram:hover i
{
  color: #ff8b5a;
}

.social-network a:hover
{
  border-color: #ff8b5a;
}

@media only screen and (min-width: 768px)
{
  .appstore_1
  {
    display: block;
  }

  .appstore_2
  {
    display: none;
  }
}

@media only screen and (max-width: 768px)
{
  .appstore_1
  {
    display: none;
  }

  .appstore_2
  {
    display: block;
 ...