JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Normally the tab list is generated with JSX, but in this simple example we just grab it from here-->
<ul class="tabs-list hidden" id="tabs">
    <li>Tab 1</li>
    <li>This is Tab 2</li>
    <li>And this Tab 3</li>
</ul>

 
<br>
<br>
<br>

<div class="tabs" id="container"></div>

CSS

.tabs {
  width: 200px;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  background-color: blue;
  padding: 3px;
  color: white;
  border: 1px solid black;
}

.hidden {
 visibility: hidden;
}

JavaScript

function predictElementSizes() {
  var tabs = document.getElementById("tabs");
  var container = document.getElementById("container");

  container.appendChild(tabs);

  var lis = tabs.childNodes;

  lis.forEach(elem => {
    if (elem.getBoundingClientRect) {
    	console.log(elem.getBoundingClientRect().width);
    }
  });

  tabs.parentNode.removeChild(tabs);
}

setTimeout(predictElementSizes, 1000);