JSFiddle - React, Tailwind, and code Playground

by shamshoomeh

HTML

<p class="option1-top">option one</p>
<p class="option2-top">option two</p>
<p class="option3-top">option three</p>
<p class="option4-top">option four</p>

<button id="option-one">one</button>
<button id="option-two">two</button>
<button id="option-three">three</button>
<button id="option-four">four</button>

<p class="option1-below">option one</p>
<p class="option2-below">option two</p>
<p class="option3-below">option three</p>
<p class="option4-below">option four</p>

JavaScript

var oneTop = document.querySelector(".option1-top");
var twoTop = document.querySelector(".option2-top");
var threeTop = document.querySelector(".option3-top");
var fourTop = document.querySelector(".option4-top");

var oneBelow = document.querySelector(".option1-below");
var twoBelow = document.querySelector(".option2-below");
var threeBelow = document.querySelector(".option3-below");
var fourBelow = document.querySelector(".option4-below");



oneTop.style.display = "block";
twoTop.style.display = "none";
threeTop.style.display = "none";
fourTop.style.display = "none";

oneBelow.style.display = "block";
twoBelow.style.display = "none";
threeBelow.style.display = "none";
fourBelow.style.display = "none";

document.getElementById("option-one").onclick = function () {
oneTop.style.display = "block";
twoTop.style.display = "none";
threeTop.style.display = "none";
fourTop.style.display = "none";

oneBelow.style.display = "block";
twoBelow.style.display = "none";
threeBelow.style.display = "none";
fourBelow.style.display = "none";
};

document.getElementById("option-two").onclick = function () {
oneTop.style.display = "none";
twoTop.style.display = "block";
threeTop.style.display = "none";
fourTop.style.display = "none";

oneBelow.style.display = "none";
twoBelow.style.display = "block";
threeBelow.style.display = "none";
fourBelow.style.display = "none";
};

document.getElementById("option-three").onclick = function () {
oneTop.style.display = "none";
twoTop.style.display = "none";
threeTop.style.display = "block";
fourTop.style.display = "none";

oneBelow.style.display = "none";
twoBelow.style.display = "none";
threeBelow.style.display = "block";
fourBelow.style.display = "none";
};

document.getElementById("option-four").onclick = function () {
oneTop.style.display = "none";
twoTop.style.display = "none";
threeTop.style.display = "none";
fourTop.style.display = "block";

oneBelow.style.display = "none";
twoBelow.style.display = "none";
threeBelow.style.display =...