JSFiddle - React, Tailwind, and code Playground

by SriSri M

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <ul class="tabs" id="todo-app">
    <li >Home</li>
    <li>About</li>
    <li>Products</li>
    <li>Services</li>
    <li>Contact</li>
  </ul>
  <div>
    You clicked Item: <strong></strong>
    <input id="clikedProduct"/>
  
  </div>
  <div>
    
    <button id="addProduct"> Add New Product</button>
  </div>
  <div> List of Products</div>
  <hr>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

SCSS

.tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-item-type: none;
  li {
    padding: 0;
  }
}

JavaScript

var list = document.getElementById('todo-app');

list.forEach(function(item) {
	console.log(item);
});