JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<div class="news-wrap margin-top-div">
   <div class="news-btn-container-flex">
      <div class="news-btn-div current" data-tab="1" onclick="req1()">1</div>
      <div class="news-btn-div" data-tab="2" onclick="req2()">2</div>
      <div class="news-btn-div" data-tab="3" onclick="req3()">3</div>
      <div class="news-btn-div" data-tab="4" onclick="req4()">4</div>
      <div class="news-btn-div" data-tab="5" onclick="req5()">5</div>
   </div>

   <div class="news-content-container-flex">
      <div class="news-title">
         <span id="newsTitle">
            </span>
      </div>
      <div class="news-content-1">
         <span id="newsContent">              
            </span>
      </div>
      <div class="news-content-2">
         <span>
            </span>
      </div>
   </div>

</div>

JavaScript

function req1() {
   fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(json => {
         const title = json.title;
         const body = json.body;
         document.getElementById("newsTitle").innerHTML = title;
         document.getElementById("newsContent").innerHTML = body;
      });
}
req1();


function req2() {
   fetch('https://jsonplaceholder.typicode.com/posts/2')
      .then(response => response.json())
      .then(json => {
         const title = json.title;
         const body = json.body;
         document.getElementById("newsTitle").innerHTML = title;
         document.getElementById("newsContent").innerHTML = body;
      });
}
req2();


function req3() {
   fetch('https://jsonplaceholder.typicode.com/posts/3')
      .then(response => response.json())
      .then(json => {
         const title = json.title;
         const body = json.body;
         document.getElementById("newsTitle").innerHTML = title;
         document.getElementById("newsContent").innerHTML = body;
      });
}
req3();


function req4() {
   fetch('https://jsonplaceholder.typicode.com/posts/4')
      .then(response => response.json())
      .then(json => {
         const title = json.title;
         const body = json.body;
         document.getElementById("newsTitle").innerHTML = title;
         document.getElementById("newsContent").innerHTML = body;
      });
}
req4();


function req5() {
   fetch('https://jsonplaceholder.typicode.com/posts/5')
      .then(response => response.json())
      .then(json => {
         const title = json.title;
         const body = json.body;
         document.getElementById("newsTitle").innerHTML = title;
         document.getElementById("newsContent").innerHTML = body;
      });
}
req5();