JSFiddle - React, Tailwind, and code Playground

by cucocreative

HTML

<div class="row">
<div class="large-10 columns">
<h1>Wrapping Works</h1>
<ul class="a">
 	<li>Ligula</li>
 	<li>Inceptos Ultricies</li>
 	<li>Sollicitudin Cras</li>
 	<li>Nullam Pellentesque</li>
 	<li><strong>This is on a new line</strong></li>
 	<li>Ligula</li>
 	<li>Sollicitudin Cras</li>
</ul>

<h1>Or Centering works</h1>
<ul class="b">
 	<li>Ligula</li>
 	<li>Inceptos Ultricies</li>
 	<li>Sollicitudin Cras</li>
 	<li>Nullam Pellentesque</li>
  <li><strong>This should be on a new line</strong></li>
 	<li>Ligula</li>
 	<li>Sollicitudin Cras</li>
</ul>

<h1>Just can't get it to work with wrapping AND centering</h1>
</div>
</div>

CSS

ul { width: 100%}
ul.a li {
list-style: none;
float: left;
display: inline;
border-right: 2px #ed1165 solid;
margin-bottom: 10px;
padding: 0 15px;
}
ul.b li {
list-style: none;
display: inline-block;
border-right: 2px #ed1165 solid;
margin-bottom: 10px;
padding: 0 15px;
}

ul.a li:nth-child(4), ul.b li:nth-child(4) {
border-right: 0px #ed1165 solid;
}
ul.a li:last-child, ul.b li:last-child {
border-right: 0px #ed1165 solid;
}
ul.a li:nth-child(4n+5), ul.b li:nth-child(4n+5) {
clear: both;
}

h1 { clear:both; }

.row {
    margin-left: auto;
    margin-right: auto;
    max-width: 98.75rem;
    text-align: center;
}
.column, .columns {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
}
.large-10 {
    width: 80%;
}