JSFiddle - React, Tailwind, and code Playground

by tr_santi

HTML

<div class="parent">

  <div class="tag-wrapper">
  
    <span class="tag">tag 1</span>
    <span class="tag">tag 2</span>
    <span class="tag">tag 3</span>
    <span class="tag">tag 4</span>
    <span class="tag">tag 5</span>
    <span class="tag">tag 6</span>
    <span class="tag">tag 7</span>
    
  </div>

</div>

CSS

.tag {
  padding: 2px 5px 3px 5px;
  margin-right: 5px;
  border: 1px solid red;
  white-space: nowrap; /* prevent splitting spans */
  display: inline-block;
}

.tag-wrapper {
  border: 1px solid blue;
  max-width: 300px;
}

.parent {
  border: 1px solid green;
}