JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<h2>Products</h2>

<div class="column">
    <div class="section">
        
        <h3>Portfolio A to Z</h3>
        
    </div>
    <div class="section">
        
        <h3>Products</h3>
        
        <ul>
            <li>Customer Experience Management</li>
            <li>Evolved Packet Core</li>
            <li>IP Multimedia Subsystem (IMS) core</li>
            <li>Mobile Broadband</li>
            <li>Operations Support Systems</li>
            <li>Service enablement</li>
            <li>Small Cells</li>
            <li>Subscriber Data Management</li>
            <li>Transport Networks</li>
        </ul>
    </div>
</div>
<div class="column">
    <div class="section">
        
        <h3>Solutions</h3>
        
        <ul>
            <li>Customer Experience Management (CEM) for Liquid Net</li>
            <li>Device Management</li>
            <li>Heterogeneous Networks</li>
            <li>Mobile Backhaul</li>
            <li>Mobile Site Connectivity</li>
            <li>Multi Vendor Configuration Management and Optimization</li>
            <li>Multiservice IP Backbone</li>
            <li>Network Sharing</li>
            <li>Operator Content Delivery Network (CDN)</li>
            <li>Policy Integration Package</li>
            <li>Quality of Service Differentiation</li>
            <li>Security</li>
            <li>Self Organizing Networks</li>
            <li>Service Operations and Management</li>
            <li>Smartphone Friendly Networks</li>
            <li>Voice over LTE</li>
            <li>WCDMA Refarming</li>
        </ul>
    </div>
    
</div>
<div class="column">
    <div class="section">
        
        <h3>Services</h3>
        
        <ul>
            <li>Active Software Support</li>
            <li>Capacity Optimization</li>
            <li>Care</li>
            <li>Customer Care Automation</li>
            <li>Customer Experience Optimization</li>
            <li>Global Service Delivery</li>
            <li>Mobile Broadband...

CSS

h2 {
    padding: 0 1%;
}

.column {
    max-width: 23%;
    padding: 0 1%;
    float: left;
    font-family: arial;
    font-size: 0.8em;
}

h3 {
    margin: 1em 0 0;
}
ul {
    margin: 0.5em 0;
    padding: 0;
    list-style: none;
}

li {
    padding: 3px 5px;
    background: #eee;
    margin-bottom: 5px;
}