JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<div id="banner-message">
  <p>Hello World</p>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

JavaScript

let sportList = [];
let result = [{title : 'test1', key:'1'},{title : 'test2', key:'2'},{title : 'test3', key:'3'}];
result.forEach(x => {
  sportList.push(x);
});

console.log("Data Loaded");
console.log(result);
console.log(sportList);
console.log(JSON.stringify(sportList));
localStorage.setItem('sportsData',JSON.stringify(sportList));
console.log(localStorage.getItem('sportsData'));
document.getElementById('banner-message').innerHTML=localStorage.getItem('sportsData');