JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="seznam-filmov.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>List of movies</h1>
  <div class="container">

    <div class="row">

      <div class="col">
        <ul class="list-group"></ul>
        <br />
        <br/>
      </div>

      <div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="" />
          <div class="card-block">
            <h4 class="card-title"></h4>
            <p class="card-text"></p>
          </div>
          <ul class="list-group list-group-flush"></ul>
          <div class="card-block">
            <a href="#" class="card-link">Spletna stran</a>
            <a href="#" class="card-link">IMDb</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

CSS

.container ul:nth-child(1) li {
  cursor: pointer;
}

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
}

JavaScript

$(document).ready(function(){
$("ul:first").append('<li class="list-group-item">' + (filmi.Movies[0].Title) + '</li>').attr(filmi.Movies[0].imdbID)
$(filmi.Movies[0].imdbID).addClass('list-group-item list-group-item-action')

});

 $(document).ready(function() {
    $(".card").hide();
 });

$(document).ready(function() {
  $("li:first").click(function () {
    $(".card").show();
    $(".card").append('<img class="card-img-top" src=' + (filmi.Movies[0].Poster) + '/>')
  });
});

const filmi = {
  "Movies": [
    {
      "Title": "La La Land",
      "Year": "2016",
      "Rated": "PG-13",
      "Released": "25 Dec 2016",
      "Runtime": "128 min",
      "Genre": "Comedy, Drama, Music",
      "Director": "Damien Chazelle",
      "Writer": "Damien Chazelle",
      "Actors": "Ryan Gosling, Emma Stone, Amiée Conn, Terry Walters",
      "Plot": "A jazz pianist falls for an aspiring actress in Los Angeles.",
      "Language": "English",
      "Country": "USA, Hong Kong",
      "Awards": "Won 6 Oscars. Another 184 wins & 224 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzUzNDM2NzM2MV5BMl5BanBnXkFtZTgwNTM3NTg4OTE@._V1_SX300.jpg",
      "Ratings": [
        {
          "Source": "Internet Movie Database",
          "Value": "8.3/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "93%"
        },
        {
          "Source": "Metacritic",
          "Value": "93/100"
        }
      ],
      "Metascore": "93",
      "imdbRating": "8.3",
      "imdbVotes": "232,825",
      "imdbID": "tt3783958",
      "Type": "movie",
      "DVD": "25 Apr 2017",
      "BoxOffice": "$150,459,658.00",
      "Production": "Liongate Films",
      "Website": "http://www.lalaland.movie/",
      "Response": "True"
    },
    {
      "Title": "Fracture",
      "Year": "2007",
      "Rated": "R",
      "Released": "20 Apr 2007",
      "Runtime": "113 min",
      "Genre": "Crime, Drama, Mystery",
      "Director": "Gregory...