JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<ul>
<li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view"><div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view"><div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
Electronics
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<!----><!----></div>
</div>
</div></li>
<li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view"><div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view"><div class="xyzq-list-column flex-width fixed-width">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
Cameras
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<!----></div>
</div>
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
...
CSS
div {
background-color:#eeeeee;
display:inline;
}
#ul li {
display: grid;
column-count: 4;
column-gap: 20px;
display: inline;
}