JSFiddle - React, Tailwind, and code Playground

by luc99

HTML

<DOCTYPE HTML>
  <html>
  <head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Planning</title>
 
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
  integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 
<style>

  #col-1{
      min-width: 125px; 
      position: -webkit-sticky;
      position: sticky;
      left: 0px;
      background: #BCCADD;
      border-right: 1px solid #8BA0BC;
  }
  
  .eerste{
      min-width: 125px;
      position: -webkit-sticky; 
      position: sticky;
      left: 0px;
      z-index: 1000;
      background: #BCCADD;
      border-right: 1px solid #8BA0BC;
      }
  
  #tabell {
    position: absolute;
    left: 0px;
    top: 0px;
    }
    
  #scrollablearea {
    position: absolute;
    left: 127px;
    top: 69px;
  }
  
  table, th, td {
    border: 1px solid #8BA0BC;
    border-collapse: collapse;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;  
  }
  
  th {
      min-width: 20px; 
      height: 20px;
      border-right: 1px solid #8BA0BC;
      border-top: 1px solid #8BA0BC;
      border-bottom: 1px solid #8BA0BC;
      line-height: 20px;
      color: #000;
      background: #BCCADD repeat-x 0 center;
      
  }
  
  td {
      text-align: left;
      height: 23px;
  }
  
  .d0 {
      background-color: #DDDDDD;
  }
  
  .d6 {
      background-color: #DDDDDD;
  }
  
</style>

</head>
  
  <body>
  
  <table id="tabell" border="1px"></table>
  <div id="scrollablearea"></div>

<script>

function bepaalEndDate (){
   ...