JSFiddle - React, Tailwind, and code Playground

CSS

.does-not-apply {
	background-color: hsl(100, 0%, 12%);
}

div {
    border: 0px;
    margin: 0px;
    padding: 0px;
    width: 5px;
    height: 20px;
    display: inline-block;
}

.value25 { background-color: hsl(100, 100%, 50%); width: 250px; }
.value10 { background-color: hsl(100, 60%, 50%); width: 100px; }
.value8  { background-color: hsl(100, 50%, 50%); width: 80px; }
.value6  { background-color: hsl(100, 40%, 50%); width: 60px; }
.value5  { background-color: hsl(100, 45%, 50%); width: 50px; }
.value3  { background-color: hsl(100, 30%, 50%); width: 30px; }
.value2  { background-color: hsl(100, 20%, 50%); width: 20px; }
.value1  { background-color: hsl(100, 10%, 50%); width: 10px; }

.value-20 { background-color: hsl(0, 80%, 50%); width: 200px; }
.value-15 { background-color: hsl(0, 70%, 50%); width: 150px; }
.value-10 { background-color: hsl(0, 60%, 50%); width: 100px; }
.value-5  { background-color: hsl(0, 45%, 50%); width: 50px; }
.value-3  { background-color: hsl(0, 30%, 50%); width: 30px; }
.value-1  { background-color: hsl(0, 10%, 50%); width: 10px; }

.value0  { background-color: hsl(100, 0%, 50%); width: 10px; }

JavaScript

movies = {
	'All Categories': [
		{'applies': true, 'worth':  25, 'title': 'Is there a female protagonist?'},
		{'applies': true, 'worth':   5, 'title': 'Is she nonwhite?'},
		{'applies': true, 'worth': -10, 'title': 'Could the protagonist have been female without significantly impacting the film as a whole? (for a film with a male protagonist)'},
		{'applies': true, 'worth':  10, 'title': 'Is there a female character with significant screen time who grows, changes, and/or learns something over the course of the story? (for an ensemble cast, or a film with a male protagonist)'},
		{'applies': true, 'worth':   2, 'title': 'Is she nonwhite?'},
		{'applies': true, 'worth':  -5, 'title': 'Is she the only woman in an otherwise all-male ensemble?'},
		{'applies': true, 'worth':   5, 'title': 'Is there a female character with significant screen time in a position of authority?'},
		{'applies': true, 'worth':   2, 'title': 'Is she nonwhite?'},
		{'applies': true, 'worth':   5, 'title': 'More than one (of any race)?'},
		{'applies': true, 'worth':  -5, 'title': 'Is there a female character with significant screen time who dresses less appropriately for the environment than her male counterparts do?'},
		{'applies': true, 'worth':  -5, 'title': 'More than one?'},
		{'applies': true, 'worth':  -5, 'title': 'Is there a female character with significant screen time who bares her breasts?'},
		{'applies': true, 'worth':  -5, 'title': 'More than one?'},
		{'applies': true, 'worth': -10, 'title': 'Is there a female character with significant screen time who appears fully nude?'},
		{'applies': true, 'worth': -10, 'title': 'More than one?'},
		{'applies': true, 'worth':   8, 'title': 'Does a man appear fully nude?'},
		{'applies': true, 'worth':   8, 'title': 'More than one?'},
		{'applies': true, 'worth':   1, 'title': 'Is there a female character with insignificant screen time in a position of authority?'},
		{'applies': true, 'worth':   1, 'title': 'More than...