JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
       </head>
    <body>

        <table>
            <tr>
                <td>foobar 1</td>
                <td>foobar 2</td>
            </tr>
            <tr>
                <td>foobar 3</td>
                <td>foobar 4</td>
            </tr>
                  
            
        <table>

CSS

table{padding: 2px; border-collapse: none}

td+td{border-left: 1px solid black; padding: 4px}
tr{border: 1px solid red; display: block}