JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Table to Excel Demo</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"
        rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif !important;
        }
    </style>
</head>

<body>
    <div class="container mt-3">
        <h3>Table to Excel Demo</h3>
        <p>Exporting the W3C Example Table</p>

        <div>
            <input type="button" class="btn btn-primary font-weight-bold"
                onclick="tableToExcel('testTable', 'Example Table')" value="&nbsp; Export to Excel &nbsp;">
        </div>

        <br />

        <table id="testTable" summary="Code page support in different versions of MS Windows." rules="groups"
            frame="hsides" class="table" style="border-color: transparent;">

            <thead valign="top">
                <tr>
                    <th colspan="7" style="text-align:center;background-color: #007bff; color: #fff">
                        TABLE TITLE
                    </th>
                </tr>
                <tr>
                    <th style="background-color: #dedede;">ID</th>
                    <th style="background-color: #dedede;">Name</th>
                 ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}