JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="heading">Centered Text</div>
    <div id="number_container">
      <ul>
        <li><a id="1">1</a></li>
        <li><a id="2">2</a></li>
        <li><a id="3">3</a></li>
        <li><a id="4">4</a></li>
        <li><a id="5">5</a></li>
        <li><a id="6">6</a></li>
        <li><a id="7">7</a></li>
        <li><a id="8">8</a></li>
        <li><a id="9">9</a></li>
        <li><a id="10">10</a></li>
        <li><a id="11">11</a></li>
        <li><a id="12">12</a></li>
        <li><a id="13">13</a></li>
        <li><a id="14">14</a></li>
        <li><a id="15">15</a></li>
        <li><a id="16">16</a></li>
        <li><a id="17">17</a></li>
        <li><a id="18">10</a></li>
        <li><a id="19">11</a></li>
        <li><a id="20">12</a></li>
        <li><a id="21">13</a></li>
        <li><a id="22">14</a></li>
        <li><a id="23">15</a></li>
        <li><a id="24">16</a></li>
        <li><a id="25">17</a></li>
        <li><a id="26">18</a></li>      </ul>
    </div>
  </div>

CSS

#content{
      background-color: yellow;
      overflow: hidden;
      /* margin: auto; */
      padding: 0 15px;
      width: 100%;
      box-sizing: border-box;
    }
    #heading{
      text-align: center;
    }

    #number_container {
      overflow: hidden;
      background-color: #07c;
      width: auto;
            text-align: center;

    }

    ul{
      padding: 0;
    }

    li {
      display: inline-block;
      list-style: none;
      /* text-align: -webkit-match-parent; */
    }

    ul li a {
      display: inline-block;
      padding: 5px 5px 3px 5px;
      min-width: 35px;
      margin: 5px;
      min-height: 35px;
      line-height: 37px;
      color: #333;
      text-decoration: none;
      text-align: center;
      background-color: #fff;
      border: #fff solid 1px;
    }