JSFiddle - React, Tailwind, and code Playground

HTML

<input id="bar-widths-input"/>

<div id="bar-container">
  <div class="bar"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CSS

body, input, #bar-container {
  margin: 15px;
}

.bar {
  background-color: #009D3B;
  border: 1px solid white;
  height: 30px;
  width: 100%;  
}

JavaScript

// Render a horizontal percentage-based bar chart that displays
// multiple bars side-by-side in a single row, based on the sizes
// given in the input array.

// Input format is a comma-separated list of numbers.
// For example, entering `1,2,1` will render three bars, with the
// middle bar having twice the width of the other bars.

// The bar chart will be re-rendered as the values in the input updates.

// Sample behaviour
// https://paradite.com/wp-content/uploads/2017/12/percentage-bar.gif

// Feel free to make changes to the given markup and CSS.

// Write your code here.