JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<ul class="list">
  <li>lipsum*2</li>
  <li>lipsum*2</li>
  <li>lipsum*2</li>
  <li>lipsum*2</li>
  <li>lipsum*2</li>
</ul>

SCSS

html {
  font-size: 62.5%;
}
body {
  padding: 5%;
}

.list {
  font-size: 0;
  
  & > li {
    font-size: 1rem;

    display: inline-block;
    vertical-align: middle;
    
    padding: 10px 20px;
    border: 1px solid #eee;
    
    & + li {
      margin-left: 10px;
    }
  }
}