JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottombar">
            <div class="bartext" style="float:left">
                <p href="ContactUs.html">Contact Us</p>
                <p>Site Map</p>
                <p>©2020</p>
            </div>
            
            <div class="socialicons" style="float:right">
                
                    <div class="icon">
                        <a href="https://facebook.com" target="_blank"><img title="Facebook" src="Images/FacebookLogo.png" alt="Facebook Logo" style="width:42px;height:42px;"></a>
                    </div>
                        
                    <div class="icon">
                        <a href="https://instagram.com" target="_blank"><img title="Instagram" src="Images/InstagramLogo.png" alt="Instagram Logo" style="width:42px;height:42px;"></a>
                    </div>
                        
                    <div class="icon">
                        <a href="https://youtube.com" target="_blank"><img title="Youtube" src="Images/YoutubeLogo.png" alt="Youtube Logo" style="width:42px;height:42px;"></a>
                    </div>
                
            </div>  
        </div>

CSS

.bottombar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #575a5a;
  color: white;
  text-align: left;
  border-top: 1px solid black;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
}