JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div>
        some text.....
    </div>
<table class="children-table" style="width: 100%">
    <tbody>
        <tr class="title-table">
            <td class="name">
                name
            </td>
            <td class="order-reason">
                reason
            </td>
            <td class="cost">
                cost
            </td>
        </tr>
        <tr class="child-record">
            <td class="name">
                Dan
            </td>
            <td class="order-reason">
                Stolen
            </td>
            <td class="cost">
                10
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="thick-divide">
                </div>
            </td>
        </tr>
        <tr class="bold total">
            <td class="name" colspan="2">
                total
            </td>
            <td class="cost">
                10
            </td>
        </tr>
    </tbody>
</table>
    <div>
        another text...
    </div>
</div>

CSS

div{
    background-color: blue;
}
table.children-table
        {
            border-style: solid;
            border-width: 1px;
            overflow: hidden;
            border-collapse: collapse;
            border-color: transparent;
            border-radius: 10px;
        }
		
		tr.title-table
        {
            background: black;
            color: white;
        }
        tr.total
        {
            padding: 2% 2% 2% 0;
            background: white;
        }
        tr.child-record
        {
            background: white;
        }
        td.name
        {
            width: 20%;
            padding: 1% 2% 1% 2%;
        }
        td.order-reason
        {
            width: 60%;
            padding: 1% 2% 1% 0;
        }
        td.cost
        {
            width: 20%;
            direction: ltr;
            padding: 1% 2% 1% 3%;
        }
        td.bold
        {
            font-weight: bold;
        }
		 .thick-divide
        {
            height: 0px;
            width: 100%;
            font-weight: bold;
            border: 0;
            border-top: 3px solid #E0E0E0;
        }