JSFiddle - React, Tailwind, and code Playground

by Marcelo Leiva

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Sample</title>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>
<body>
<div id="app" class="container">
    <div id="sample"  class="table-responsive">
        <table id="tbl_sample" class="table table-hover">
            <thead>
            <tr>
                <th class="col col-lg-8 col-md-8 col-sm-8 col-xs-8">text1</th>
                <th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text2</th>
                <th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text3</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ABC</td>
                    <td>DEF</td>
                    <td>HIJ</td>
                </tr>
                <tr>
                   <td>ABC</td>
                    <td>DEF</td>
                    <td>HIJ</td>
                </tr>
                <tr>
                    <td>ABC</td>
                    <td>DEF</td>
                    <td>HIJ</td>
                </tr>

            </tbody>
        </table>
    </div>
</div>

</body>
</html>