JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<ul>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>
<li><div class="inner"><div class="vcenter">a</div></div></li>


</ul>

SCSS

ul {
            padding: 0;
            margin: 0;
            overflow: hidden;
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            //border-width: @border-with 0 0 @border-with;
            position: relative;
            z-index: 1;

            &, & > li {
                border-style: solid;
                //border-color: @default-border-color;
            }

            & > li {
                display: inline-block; // fallback older browsers
                flex-grow: 1;
                flex-basis: 0;
                text-align: center;
                
                box-sizing: border-box;
                margin: 0;
                padding: 7px;
                //border-width: 0 @border-with @border-with 0;
                //background-color: @bg-color;
                position: relative;
                cursor: pointer;

                &::before {
                    content: none;
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    //border-top: @border-with solid @hover-border-color;
                    //border-left: @border-with solid @hover-border-color;
                }

                .inner {
                    display: table;
                    height: 100%;
                    width: 100%;

                    .vcenter {
                        display: table-cell;
                        vertical-align: middle;
                        text-align: center;
                    }
                }

                &:hover {
                    border-color: @hover-border-color;

                    &::before {
                        content: '';
                    }
                }

                &.prod-media-selected, &.prod-media-selected::before {
                    content: '';
                    //border-color: @selected-border-color;
      ...