JSFiddle - React, Tailwind, and code Playground

by Dinocanid

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <div class="game-container">
    <div class="games">
    <h2>Games List</h2>
      <ul>
        <li><a href="#tabs-1"><img src="http://atrocity.mysidiahost.com/picuploads/png/2a5bbd30a1947e30eab4eec2f2c96659.png"></a></li>
        <li><a href="#tabs-2"><img src="http://atrocity.mysidiahost.com/picuploads/png/ec5c10548ab955fe018b111c8672e816.png"></a></li>
        <li><a href="#tabs-3"><img src="http://atrocity.mysidiahost.com/picuploads/png/b6fa8afcf34be457185209a9f1e5c486.png"></a></li>
        <li><a href="#tabs-3"><img src="http://atrocity.mysidiahost.com/picuploads/png/730cc64d97ad871f32b9eb72af6c8351.png"></a></li>
      </ul>
    </div>
    <div class="description">
      <div id="tabs-1">
        <p><h3>Hi-Lo</h3>Play a game against Maria where you have to choose whether her number is higher or lower than yours.<br></br><button>Play!</button><hr><h3>High Score</h3> Ittermat - 1000 pts</p>
      </div>
      <div id="tabs-2">
        <p><h3>Word Scramble</h3>Madeline has some words for you! see if you can unscramble these atrocity related words and win some beads!<hr><button>Play!</button><h3>High Score</h3> Ittermat - 1000 pts</p>
      </div>
      <div id="tabs-3">
        <p><h3>Hi-Lo</h3>Play a game against Maria where you have to choose whether her number is higher or lower than yours.<hr><h3>High Score</h3> Ittermat - 1000 pts</p>
      </div>
    </div>
  </div>

CSS

li{
   display: inline-block;
}

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-template-columns: repeat(auto-fill);
  grid-gap: 5px;
  background-color: #848484;
  padding: 5px;
  width:100%;
}

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

JavaScript

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