First web-only React app

index.html

    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel">
      const schedule = [
        ['Friday, Aug 27th', [
          ['3pm', 'Leave home'],
          ['', 'Arrive REI, pick up items'],
          ['', 'Arrive Mountaineers, pick up maps'],
          ['6pm', "Arrive Olympic Nat'l Park Visitor Center"],
          ['8pm', 'Arrive 84 Prairies End Drive Campsite #1, Forks'],
          ['9pm', 'Dinner in La Push']
        ]],
        ['Saturday, Aug 28th', [
          ['7am', 'Leave camp'],
          ['7:10am', 'Arrive Third Beach trailhead'],
          ['7:30am', 'Walk to Strawberry Point'],
          ['3pm', 'Make camp'],
          ['4pm', 'Walk further']
        ]],
        ['Sunday, Aug 29th', [
          ['8am', 'Walk back to car'],
          ['1pm','Drive to Visitor Center'],
          ['','Drop off bear canister'],
          ['','Drive home']
        ]]
      ]

      function Day(props) {
        const dayline = []
        for (const [time, what] of props.sched) {
          dayline.push(
            <li key={time} className="list-timeline-item p-0 pb-3 pb-lg-4 d-flex flex-wrap flex-column">
              <p className="my-0 text-dark flex-fw text-sm text-uppercase">
              <span key={`${time} ${what}`} className="text-inverse op-8">{time} </span> - {what}
              </p>
            </li>
          )
        }
        return dayline
      }

      const timeline = []
      for (const [day, sched] of schedule) {
        timeline.push(
          <div key={day} className="col-lg-4 mb-3" id={day}>
            <h4 className="mt-0 mb-3 text-dark op-8 font-weight-bold">
              {day}
            </h4>
            <ul className="list-timeline list-timeline-primary">
              <Day sched={sched} />
            </ul>
          </div>
        )
      }

      const domContainer = document.querySelector('#cont')
      ReactDOM.render(timeline, domContainer)
    </script>