JSFiddle - React, Tailwind, and code Playground

HTML

<table id="test"></table>

CSS

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

table th {
    background-color: #202225;
    color: #abadb0;
}

table td {
    background-color: #292b2f;
    color: #abadb0;
}

table th, table td {
    padding: 8px;
    text-align: left;
}

table tr:hover td {
    background-color: #abadb0;
    color: #2e5491;
}

JavaScript

function setHeaderTable(table, titles) {
    let content = "";
    content += "<tr>"
    titles.forEach(function(value, key) {
        content += `<th>${value}</th>`
    })
    content += "</tr>"
    document.querySelector(table).innerHTML = content
}

const titles = ["Test 1", "Test 2", "Test 3"]; 
setHeaderTable("#test", titles)