JSFiddle - React, Tailwind, and code Playground

HTML

<div class="collapse navbar-collapse" id="categorycollapse">
        <ul id="Category" class="row list-inline  nav navbar-nav">      
            <li>
                <a href="/products/Category/Cars">
                    Cars
                </a>
            </li>
    
            <li>
                <a href="/products/Category/Cars%20R">
                    Cars R
                </a>
            </li>
    
            <li>
                <a href="/products/Category/Bus">
                    Bus
                </a>
            </li>
    
            <li>
                <a href="/products/Category/Bus">
                    Bus
                </a>
            </li>
    
            <li>
                <a href="/products/Category/Tempo">
                    Tempo
                </a>
            </li>
    
            <li>
                <a href="/products/Category/Cycle">
                    Cycle
                </a>
            </li>
    
            <li>
                <a href="/products/Category/Jet">
                    Jet
                </a>
            </li> 
                      <li>
                <a href="/products/Category/Jet">
                    Jet
                </a>
            </li>   
                      <li>
                <a href="/products/Category/Jet">
                    Jet
                </a>
            </li>   
                      <li>
                <a href="/products/Category/Jet">
                    Jet
                </a>
            </li>   
                      <li>
                <a href="/products/Category/Jet">
                    Jet
                </a>
            </li>   
                      <li>
                <a href="/products/Category/Jet">
                    Jet
                </a>
            </li>   
                      <li>
                <a href="/products/Category/Jet">
                    Jet
                </a>
            </li>   
                      <li>
                <a...

CSS

#Category {
        border:1px solid #C4C6C6;
        margin: 0 60px 0 60px;
        padding: 20px !important;
        border-radius: 5px !important;
        font-size: 12px !important;
        text-align:center;
    }
#Category > ul {
  display:block;
  margin-left:auto;
  margin-right:auto;
  
}
    #Category > li {
        font-family: 'Open Sans',sans-serif;
        font-size: 14px;
        font-weight: 400;
        margin-top: 15px;
        margin-left:auto;
        margin-right:auto;
        padding: 0 0 20px;
        display: inline-block;
    }
    
    
    #Category li a, ol li a {
     background-color: #07575B;
      color: #FFFFFF;
            transition: background .2s ease-in;
        -o-transition: background .2s ease-in;
        -moz-transition: background .2s ease-in;
        -webkit-transition: background .2s ease-in;
            padding: 10px 10px;
        border-radius: 3px;
        font-size: 14px !important;
        display: inline !important;
    }