JSFiddle - React, Tailwind, and code Playground

by kpulkit29

HTML

<!-- <div class="buttons">
  <a href="#1" >Option 1</a>
  <a href="#2" >Option 2</a>
  <a href="#3" >Option 3</a>
</div>
  <p id="1">
    pulkit
  </p>
  <p id="2">
    :)
  </p>
  <p id="3">
    Vanshika
  </p>
  
 <div class="test">
 <h1> this is </h1>
 <p className="paragraph"> a <button> button </button> from <a href="https://bfe.dev"><b>BFE</b>.dev</a>
</p>
</div> -->
<div class="test">
<table>
<tr>
  <th class="sticky">Name</th>
  <th>Age</th>
  <th>Turn</th>
  <th>Notuen</th>
  
</tr>
<tr>
  <td  class="sticky">1</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  
</tr>
<tr>
  <td  class="sticky">1</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  
</tr>
<tr>
  <td  class="sticky">1</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  
</tr>

</table>
</div>

CSS

..buttons {
  display: flex;
}
.buttons a {
  color: #333;
  text-decoration: none;
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-right: 0;
  border-bottom: 0;
  flex-grow: 1;
}
.buttons a:last-child {
  border-right: 1px solid #ddd;
}
.buttons a:active {
  background: red;
  border-color: red;
  color: #fff;
}

/* p {
  display: none;
}

p:target {
  display: block;
} */
.test {
  overflow: auto;
  white-space: nowwrap;
  width: 300px;
  position: relative;
}
td, th {
  min-width: 200px;
  max-width: 200px;
}

.sticky {
  position: sticky;
  left: 0px;
}

JavaScript

/* 
let abc = document.getElementsByClassName("test")[0];
  let tree = {}
function virtualize(element) {
  // your code here
  function helper(node, parent) {
      if(!node) return;
      let currNode;
      currNode = {}
      currNode.type = node.nodeName;
      currNode.value = node.nodeValue;
      currNode.children = [];
      if(parent) {
        parent.children.push(currNode);
      } else {
        tree = currNode;
      }
      
      for(let item of node.childNodes) {
        helper(item, currNode);
      }
      return
  }
  helper(element, null);
  //onsole.log(tree);
}

function render(obj, parent) {
  // your code here
  let { type, value, children } = obj;
  console.log(type.toLowerCase(), parent?.nodeType);
  let node = type == "#text" ? value : document.createElement(type.toLowerCase());
  if(parent) {
    type == "#text" ? parent.append(node) : parent.appendChild(node) ;
  }
  for(let item of children) {
        render(item, node);
  }
  if(!parent) {
      document.body.appendChild(node);
  }
  return 
}

virtualize(abc)
render(tree); */