JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alerts</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #F7F7F7;
    }

    .alert-box {
      margin: 20px auto;
      padding: 10px;
      max-width: 500px;
      background-color: #FFF;
      border: 2px solid #CCC;
      border-radius: 10px;
      text-align: center;
    }

    .current-alert {
      background-color: #FFA5A5;
      color: #FFF;
      border-color: #FF5151;
    }

    .past-alert {
      background-color: #EFEFEF;
      color: #555;
      border-color: #CCC;
    }

    .no-alerts {
      margin: 20px auto;
      padding: 10px;
      max-width: 500px;
      background-color: #EFEFEF;
      border: 2px solid #CCC;
      border-radius: 10px;
      text-align: center;
      color: #555;
    }
  </style>
</head>

<body>
  <div id="alert-container"></div>

  <div id="no-alerts" class="no-alerts hidden">
אין התרעות חדשות
  </div>

  <script>
    const alertContainer = document.getElementById('alert-container');
    const noAlertsContainer = document.getElementById('no-alerts');
    let currentAlert = null;

    function getAlerts() {
      fetch('https://www.kore.co.il/redAlert.json')
        .then(response => response.json())
        .then(data => {
          if (data == null) {
            noAlertsContainer.classList.remove('hidden');
            alertContainer.classList.add('hidden');
          } else if (currentAlert == null || currentAlert.id !== data.id) {
            noAlertsContainer.classList.add('hidden');
            alertContainer.classList.remove('hidden');
            currentAlert = data;
            const alertBox = document.createElement('div');
            alertBox.classList.add('alert-box', 'current-alert');
            alertBox.innerHTML = `
              <h2>${data.title}</h2>
              <p>${data.data.join(', ')}</p>
              <p>התקבלה ב...