JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-center">
<ul id="feed" class="list-group"></ul>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

JavaScript

$(function () {

    var baseUrl = "https://api.themoviedb.org/3/discover/movie";
    //var baseUrl = "https://api.themoviedb.org/3/movie/";
    /*I NEED TO MOVE THE BELOW API KEY INTO THE BACKEND!!!*/
    var apiKey = "?page=1&include_video=false&include_adult=false&sort_by=popularity.desc&language=en-US&api_key=45ddf563ac3fb845f2d5c363190d1a33"; //Include adult = false still shown pornographic material?
    //var rng = (Math.floor(Math.random() * 520271) + 1);
    var APIurl = baseUrl + apiKey; /*+ rng +*/

    console.log("Url it is loading the data from: " + APIurl);// for testing / debugging

    fetch(new Request(APIurl))
        .then(response => {
            if (response.status === 200) return response.json();
            else throw new Error('No film found or no response from the API server!!!');
        })
        .then(feed => {
            for (var i = 0; i < feed.results.length; i++) {
                let item = '<li class="list-group-item">';
                item += '<img class="center-block img-fluid" alt="Movie Poster Image" src="' + 'https://image.tmdb.org/t/p/w500' + feed.results[i].poster_path + '" alt="">'
                console.log("Full image path: " + 'https://image.tmdb.org/t/p/w500' + feed.results[i].poster_path); // for testing / debugging
                item += '<br>' + '<br>' + '<strong>' + "Title of film / movie: " + '</strong>' + feed.results[i].title;
                console.log("Title of film / movie: " + feed.results[i].title); // for testing / debugging
                item += '<br>' + '<br>' + '<strong>' + "Overview / description of film: " + '</strong>' + feed.results[i].overview;
                console.log("Overview / description of film: " + feed.results[i].overview)


                /*
                let genre = feed.genres.length ? feed.genres[i].name : '';
    
                if (genre) {
                    item += '<br>' + '<br>' + '<strong>' + "Genre of film / movie: " + '</strong>' + feed.genres[0].name;
       ...