JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<h2 class="w3-center">Manual Slideshow</h2>
<div class="mainDiv">
Based on your requirements here are the top 10 cars that I can recommend you
<div class="x" id="x">
<table style="width: 100%; border: 1px solid black; display: none;">
<tbody>
<tr>
<td>Make</td>
<td>volkswagen</td>
</tr>
<tr>
<td>Model</td>
<td>tiguan</td>
</tr>
<tr>
<td>Vehicle Size</td>
<td>compact</td>
</tr>
<tr>
<td>Doors</td>
<td>4</td>
</tr>
<tr>
<td>Hp</td>
<td>200</td>
</tr>
<tr>
<td>Price</td>
<td>34445</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border: 1px solid black; display: block;">
<tbody>
<tr>
<td>Make</td>
<td>mitsubishi</td>
</tr>
<tr>
<td>Model</td>
<td>outlander sport</td>
</tr>
<tr>
<td>Vehicle Size</td>
<td>compact</td>
</tr>
<tr>
<td>Doors</td>
<td>4</td>
</tr>
<tr>
<td>Hp</td>
<td>168</td>
</tr>
<tr>
...
CSS
.mainDiv {
border: 1px solid black;
width: 50%;
margin-left: 10%;
}
JavaScript
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByTagName("table")
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}