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;
}
.all-collections ul{
  list-style:none;
  margin:0 auto;
  width:40%;
  text-align: center;
}
.all-collections ul li{
  display: inline-block;
}