JSFiddle - React, Tailwind, and code Playground

by pj_js15

HTML

<div class="delivery-filters" style="width: 300px; height: 100px;">
  <div style="overflow-x: auto; display: flex; justify-content: left;">
    <span><div class="CheckboxButtonIcon">123</div></span>
    <span><div class="CheckboxButtonIcon">123</div></span>
    <span><div class="CheckboxButtonIcon">123</div></span>
  </div>
  <div class="scroll-arrows"><button class="left-arrow" hidden=""></button><button class="right-arrow"></button></div>
</div>

SCSS

.delivery-filters {
  border: 1px solid gray;
  
  & > div {
    border: 1px solid blue;
    overflow-x: auto; display: flex; justify-content: left;
      
    & > span {
      
      
      & > div {
        width: 200px;
      }
    }
  }
}

JavaScript

var htmlStr =
			'<div class="delivery-filters" style="width: 300px; height: 100px;">' +
			'<div><span><div class="CheckboxButtonIcon">123</div></span>' +
			'<span><div class="CheckboxButtonIcon">123</div></span>' +
			'<span><div class="CheckboxButtonIcon">123</div></span></div>' +
			'<div class="scroll-arrows"><button class="left-arrow" hidden=""></button>' +
			'<button class="right-arrow"></button></div></div>';
		var htmlObject = document.createElement('div');
		htmlObject.innerHTML = htmlStr;
    
    
    var test = document.querySelector('.delivery-filters')
    console.log('=====', test.outerHTML);