JSFiddle - React, Tailwind, and code Playground

HTML

<div class="iziToast-message"></div>

JavaScript

// Store the messages in an object, like this:
const messages = {
 	80: 'Message shown between 8:00 - 8:30',
  85: 'Message shown between 8:30 - 9:00',
  90: 'Message shown between 9:00 - 9:30',
  95: 'Message shown between 9:30 - 10:00',
  100: 'Message shown between 10:00 - 10:30',
  105: 'Message shown between 10:30 - 11:00',
  110: 'Message shown between 11:00 - 11:30',
  115: 'Message shown between 11:30 - 12:00',
  120: 'Message shown between 12:00 - 12:30',
  125: 'Message shown between 12:30 - 13:00',
  130: 'Message shown between 13:00 - 13:30',
  135: 'Message shown between 13:30 - 14:00',
  140: 'Message shown between 14:00 - 14:30',
  145: 'Message shown between 14:30 - 15:00',
  150: 'Message shown between 15:00 - 15:30',
  155: 'Message shown between 15:30 - 16:00',
  160: 'Message shown between 16:00 - 16:30',
  165: 'Message shown between 16:30 - 17:00',
  170: 'Message shown between 17:00 - 17:30',
  175: 'Message shown between 17:30 - 18:00',
  180: 'Message shown between 18:00 - 18:30',
  185: 'Message shown between 18:30 - 19:00',
  190: 'Message shown between 19:00 - 19:30',
  0: 'All for today folks!'
};

const pad = document.querySelector('.iziToast-message');
  
(function showMessage () {
	const now = new Date(),
  	time = 10 * now.getHours() + Math.floor(now.getMinutes() / 30) * 5,
	  key = (time < 80 || time > 190) ? 0 : time,
  	nextHalf = (((59 - now.getMinutes()) % 30 + 1) * 60 - now.getSeconds()) * 1000;
	pad.textContent = messages[key];
 	setTimeout(showMessage, nextHalf);
}());