JSFiddle - React, Tailwind, and code Playground

JavaScript

var gradebookItems = [
        {
            "id": 0,
            "name": "Test Older Date",
            "itemType": "Percentage",
            "categoryId": 2,
            "hideInAllGrades": false,
            "isCategory": false,
            "dueDate": "Jun 13, 2012"
        },
        {
            "id": 1,
            "name": "Ordering Test",
            "itemType": "Percentage",
            "categoryId": 2,
            "hideInAllGrades": false,
            "isCategory": false,
            "dueDate": "Jun 18, 2012"
        },
        {
            "id": 2,
            "name": "Category 2",
            "categoryId": 2,
            "hideInAllGrades": false,
            "isCategory": true,
            "itemType": "category"
        },
        {
            "id": 3,
            "name": "Test 3",
            "itemType": "Percentage",
            "categoryId": 7,
            "hideInAllGrades": false,
            "isCategory": false,
            "dueDate": "Feb 3, 2012"
        },
        {
            "id": 4,
            "name": "Test 4",
            "itemType": "Percentage",
            "categoryId": 7,
            "hideInAllGrades": false,
            "isCategory": false,
            "dueDate": "Mar 4, 2012"
        },
        {
            "id": 5,
            "name": "Test2",
            "itemType": "Percentage",
            "categoryId": 7,
            "hideInAllGrades": false,
            "isCategory": false,
            "dueDate": "Jun 8, 2012"
        },
        {
            "id": 6,
            "name": "Third Assignment",
            "itemType": "Percentage",
            "categoryId": 7,
            "hideInAllGrades": false,
            "isCategory": false,
            "dueDate": "Jun 22, 2012"
        },
        {
            "id": 7,
            "name": "Category 1 Test",
            "categoryId": 7,
            "hideInAllGrades": false,
            "isCategory": true,
            "itemType": "category"
        }
    ];

var categories =...