JSFiddle - React, Tailwind, and code Playground

by Nabaraj Saha

HTML

<div class="newspaper">
<ul class="list_unstyled"
"><li><strong>Our Leadership</strong><ul class="innerList"><li><a href="/web/guest/lf-2015" target="_self" class="common-users-link">Leadership Forum 2015</a></li><li><a href="/web/guest/leadership-forum-2014" target="_self" class="managers-link">Leadership Forum 2014</a></li><li><a href="/web/guest/leadership-forum-2013" target="_self" class="managers-link">Leadership Forum 2013</a></li></ul></li><li><strong>Our Market Activity</strong><ul class="innerList"><li><a href="/web/guest/strategic-alliances3" target="_blank" class="common-users-link">Strategic Alliances</a></li><li><a href="/web/guest/customers-markets-offer" target="_blank" class="common-users-link">Customers,  Markets &amp; Offer</a></li></ul></li><li><strong>Our Performance</strong><ul class="innerList"><li><a href="/web/guest/bus" target="_blank" class="common-users-link">Business Performance</a></li><li><a href="/web/guest/customer-satisfaction1" target="_blank" class="common-users-link">Customer Satisfaction</a></li><li><a href="/web/guest/employee-engagement1" target="_blank" class="common-users-link">Employee Engagement</a></li></ul></li><li><strong>Our Acquisitions</strong><ul class="innerList"><li><a href="/web/guest/acquisitions-communication-kit" target="_self" class="managers-link">Acquisitions Communication Kit</a></li></ul></li><li><strong>Our Commitments</strong><ul class="innerList"><li><a href="/web/guest/sustainability" target="_blank" class="common-users-link">Sustainability</a></li><li><a href="/web/guest/schneider-electric-foundation" target="_blank" class="common-users-link">Schneider Electric Foundation</a></li></ul></li><li><strong>Company Program</strong><ul class="innerList"><li><a href="/web/guest/company-program-intranet" target="_blank" class="common-users-link">Company Program Intranet</a></li><li><a href="/web/guest/company-program-trophies" target="_blank" class="common-users-link">Company Program Trophies</a></li><li><a...

CSS

.newspaper {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
.newspaper > ul > li{
     -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -moz-page-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}