JSFiddle - React, Tailwind, and code Playground

by Dinocanid

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id='tabs'>
  <div class='game-container'>
    <div class='games'>
      <h2>Games List</h2>
      <ul>
        <li class='game-li'><a href='#game1'><img class ='game-img' src='http://atrocity.mysidiahost.com/picuploads/png/2a5bbd30a1947e30eab4eec2f2c96659.png'></a></li>
        <li class='game-li'><a href='#game2'><img class ='game-img' src='http://atrocity.mysidiahost.com/picuploads/png/2a5bbd30a1947e30eab4eec2f2c96659.png'></a></li>
      </ul>
    </div>
    <div class='description'>
      <div id='game1'>
        <p>
          <h3>{$game_info->name}</h3>
          {$game_info->description}
          <br></br>
          <a class='button' href='{$game_info->link}'>Play!</a>
          <hr>
          <h3>High Score</h3>Ittermat - 1000 pts
        </p>
      </div>
      <div id='game2'>
        <p>
          <h3>{$game_info->name}</h3>
          asdadsdas
          <br></br>
          <a class='button' href='{$game_info->link}'>Play!</a>
          <hr>
          <h3>High Score</h3>Ittermat - 1000 pts
        </p>
      </div>
    </div>
  </div>

CSS

.game-li {
  display: inline-block;
}

.game-img {
  width: 150px;
  height: auto;
}

.games {
  grid-area: main;
}

.description {
  grid-area: right;
}

.game-container {
  display: grid;
  grid-template-areas: 'main main main right right right';
  grid-gap: 5px;
  background-color: #848484;
  padding: 5px;
  width: 99%;
}

.game-container>div {
  text-align: center;
  padding: 10px;
}

JavaScript

$(function() {
   $('#tabs').tabs();
 });