JSFiddle - React, Tailwind, and code Playground

HTML

<div class="all-collections">
            <h1>Look at all collections</h1>

                <ul>
                    <li><a href="#">Summer</a></li>
                    <li><a href="#">Pink eleephant</a></li>
                    <li><a href="#">Palmira</a></li>
                    <li><a href="#">Superman</a></li>
                    <li><a href="#">Kids dream</a></li>
                    <li><a href="#">Elbas</a></li>
                    <li><a href="#">Spring</a></li>
                </ul>
</div>

SCSS

.all-collections{
  text-align:center;
  ul{
    list-style:none;
    margin:0 auto;
    width:40%;
    li{
      float:left;
      margin-left:10px;
    }
    
  }
  
}