JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<table>
    <thead>
        <tr>
            <th>
                <ul class="action">
                    <li>Edit</li>
                    <li>add</li>
                    <li>new</li>
                    <li>delete</li>
                    <li>More</li>
                </ul>
            </th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>                <ul class="action">
                    <li>Edit</li>
                    <li>add</li>
                    <li>new</li>
                    <li>delete</li>
                    <li>More</li>
                </ul></td>
            <td>col</td>
            <td>col</td>
            <td>col</td>
            <td>col</td>
        </tr>
        <tr>
            <td>                <ul class="action">
                    <li>Edit</li>
                    <li>add</li>
                    <li>new</li>
                    <li>delete</li>
                    <li>More</li>
                </ul></td>
            <td>col</td>
            <td>col</td>
            <td>col</td>
            <td>col</td>
        </tr>
        <tr>
            <td>                <ul class="action">
                    <li>Edit</li>
                    <li>add</li>
                    <li>new</li>
                    <li>delete</li>
                    <li>More</li>
                </ul></td>
            <td>col</td>
            <td>col</td>
            <td>col</td>
            <td>col</td>
        </tr>
    </tbody>
</table>

CSS

th, td{padding: 2px 6px; border: 1px solid #DDD}
ul li{display: inline; padding-right: 5px; color: blue}

.action{
    
}