JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="app-container">
  <div class="sign-up-banner"></div>
  <div class="brand-header"></div>
  <section class="">
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>Name</th>
          <th>Desc</th>
          <th>Notes</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>A</td>
          <td>Aa</td>
          <td>AAA</td>
        </tr>
      </tbody>
    </table>
  </section>
  <div class="brand-footer"></div>
</div>

CSS

* {
  box-sizing: border-box;  
}
html, body {
  padding: 0;
  margin: 0;
}

.app-container {
  position: relative;
  /*
  top: 0;
  bottom: 0px;
  */
  min-width: 640px;
  width: 640px;
  margin-left: auto;
  margin-right: auto;
  height: fit-content;
  min-height: 100vh;
}

.sign-up-banner {
  background-color: lightgreen;
  border: solid 1px purple;
  height: 64px;
  width: 100%;
}

.brand-header {
  background-color: lightslategray;
  border: solid 1px grey;
  height: 128px;
  width: 100%;
}

section {
  /* height: 1200px; */
  border: solid 1px floralwhite;
  background-color: floralwhite;
}

table {
  min-width: 960px;
}

thead, thead tr td  {
  position: sticky;
  top: 0px;
  border: solid 1px lightcoral;
  background-color: lightcoral;
}

.brand-footer {
  background-color: lightblue;
  border: solid 1px lightblue;
  height: 24px;
  width: 100%;
  position: sticky;
  bottom: 0;
  left: 0;
}

JavaScript

const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

const lorem = 'Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.';

const ipsum = 'All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.';

document.querySelector('table tbody').innerHTML =  alphabet.map((letter, index) => {
  	const cap = letter.toUpperCase();
  	return `<tr>
    	<td>${index}</td>
      <td>${cap}</td>
      <td>${lorem}</td>
      <td>${ipsum}</td>
		</tr>`;
  }).join('');