JSFiddle - React, Tailwind, and code Playground

HTML

<footer>
   <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 109" preserveAspectRatio="xMinYMin">
     <defs>
       <filter id="shadow">
         <feDropShadow x="0" y="106" dx="5px" dy="15px" flood-color="#1B0C42" flood-opacity="50%" stdDeviation="3" />
       </filter>
     </defs>
     <path d="M 1 106 L 1 52 C 1 52 330 166 720 44 C 720 44 1039 -52 1439 52 L 1439 106 1 106 Z" style="stroke:none; fill: rgb(54, 40, 124);" />

     <!--                    filter:url(#shadow);-->

   </svg>

   <div class="main-footer">
     <div class="footer-content">
       <div class="left-footer-element">
         <a href="">Home Page</a>
         <a href="#">Buy Android apps</a>
         <a href="#">Sell Android apps</a>
       </div>
       <div class=center-footer-element">
         <a href="#">Valuation Tool</a>
       </div>
       <div class="right-footer-element">
         <a href="#">About Us</a>
         <a href="#">Contact support via email</a>
         <a href="#">Privacy Policy</a>
         <a href="#">Terms of Use</a>
       </div>

     </div>
   </div>
 </footer>

CSS

.main-footer {
  box-sizing: border-box;
  width: 100%;
  height: 138px;
  background: #36287C;
  /*margin-top: 56px;*/
  /*margin-bottom: 60px;*/
  padding: 100px 50px 200px 50px;
  /*line-height: 0;*/
}

.footer-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /*width: 100%;
   height: 238px;
    width: 90%;
    /*margin-top: 60px;*/
  margin-left: 5%;
  margin-right: 5%;
  /*margin-bottom: 60px;*/
}

.footer-content a {
  display: block;
  font-family: Roboto-Medium;
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: 2.33px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 10px;
}

.footer-content a:hover {
  text-decoration: underline;
}