JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">
        <img style="width:80px; height:50px; margin:2px 2px" align="left"  src="../assets/img/kronos.gif">
        <h1 style="margin-bottom:4px" text-align="center"; align="middle">ALT Component</h1>
    </div>

    <div id="content">
        <div class="hoverTable">
            <script type='text/javascript' src="../assets/js/insert-data.js"></script>
        </div>
    </div>
    <div class="footer">footer</div>
</div>

CSS

{
margin: 0;
padding: 0;
}
.wrapper {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr 1fr;
  grid-template-areas:"header" "content" "footer";
  grid-gap: 5px;
  }

.header {
grid-area:header
}

.content {
grid-area:content
}

.hoverTable {
                                      border-collapse: collapse;
                   border: 2px black solid;
                   width: 100%;
                   font: 12px sans-serif;
                   text-align: center
                   padding-top: 100px;
               	}
               	.hoverTable td{
               		padding:7px; border:#4e95f4 1px solid;
               	}
               	/* Define the default color for all the table rows */
               	.hoverTable tr{
               		background: #b8d1f3;
               	}
               	/* Define the hover highlight color for the table row */
                   .hoverTable tr:hover {
                         background-color: #ffff99;
                   }
.footer {
grid-area:footer
}

.wrapper div:nth-child(even){
background-color: red;
}

.wrapper div:nth-child(odd){
background-color: green;
}