React Js Add Multiple Class to Element

<!DOCTYPE html>
<html>

return (
        <div className='container'>
          <div className={`my-element ${isActive ? 'active' : ''} ${isHighlighted ? 'highlighted' : ''}`}>
            Content goes here
          </div>
        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

.container {
      margin: 0 auto;
      width: 600px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }

.my-element {
      padding: 20px;
      border: 2px solid #3498db;
      border-radius: 10px;
      background-color: #fff;
      color: #333;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

.my-element.active {
      background-color: #27ae60;
      border-color: #27ae60;
      color: #fff;
      transform: scale(1.1);
    }

.my-element.highlighted {
      background-color: #f39c12;
      border-color: #f39c12;
      color: #fff;
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

}
  </style>
</body>

</html>