JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<ul _ngcontent-hvp-c301=""><li _ngcontent-hvp-c301="" mattooltipposition="below" mattooltipclass="arrow-below lowercase-first-line-capitalize" class="truncate-text ng-star-inserted" ng-reflect-position="below" ng-reflect-tooltip-class="arrow-below lowercase-first-li" ng-reflect-message="VMWARE" aria-describedby="cdk-describedby-message-5" cdk-describedby-host=""> vmware </li><!--container--><li _ngcontent-hvp-c301="" mattooltipposition="below" mattooltipclass="arrow-below lowercase-first-line-capitalize" class="truncate-text ng-star-inserted" ng-reflect-position="below" ng-reflect-tooltip-class="arrow-below lowercase-first-li" ng-reflect-message="AUTODESK" aria-describedby="cdk-describedby-message-6" cdk-describedby-host=""> autodesk </li><!--container--><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--></ul>

SCSS

ul {
      min-width: 0;
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: nowrap;
      font-size: 1rem;
      font-weight: normal;

      & > li {
        display: inline-block;
        flex-grow: 0;
        margin-inline-end: 8px;
        padding: 2px 4px;
        text-transform: capitalize;
        &::first-line {
          text-transform: capitalize;
        }
      }
    }