JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/7.2.3/gridstack.min.css" integrity="sha512-E+j/1VMJwdKrqR9HtAN+v10hxVLEYPa45J7BcSJ6hCT3T4Qic0IzV8+APYIy/S7Zx++4mdBfGIgfZfug838YWg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/7.2.3/gridstack-all.min.js" integrity="sha512-wZ/czqfjBsT65/NA4ATjcj8bLYDW0FllQ7GVoZZaYy3rKa14dcnRmkShvpVjnHh4DRL5sPi7a1e0JidBNyBWTw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.grid-stack-item {
		border: 1px dotted #000;
}
</style>
</head>
<body>
<div id="grid_site" class="grid-stack" data-gs-column="12" data-gs-animate="no">
    <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="4" gs-h="80">
        <div class="grid-stack-item-content">
            1
        </div>
    </div>
    <div class="grid-stack-item" gs-x="5" gs-y="50" gs-w="6" gs-h="10">
        <div class="grid-stack-item-content">
            2
        </div>
    </div>
</div>

<script>
GridStack.initAll({
  margin: 0,
  float: true,
  cellHeight: "1vw", // causes issues
  cellHeight: 12,
});
</script>
</body>
</html>