JSFiddle - React, Tailwind, and code Playground

HTML

<div id="moviecontainer"></div>

CSS

.movie{
    float:left; 
    margin:5px;
    padding:5px;
    border:1px solid black;
}

.title{
    color:blue;
}
.poster{
    height:200px;
}

JavaScript

var ids = ["tt0816692"];

getMoviesByimdbID(ids);

function getMoviesByimdbID(ar){
    var mymovies=$('#moviecontainer');
    for(i = 0; i<ar.length; i++){
        $.ajax({
        url: 'http://www.myapifilms.com/imdb?format=JSONP&idIMDB='+ar[i],
        type: 'GET',
        dataType: 'JSONP'

        })
        .done(function(data) {
            console.log(data);
            var title= '<p class="title">'+data.title+'</p>';
            var year= '<p class="year">year: '+data.year+'</p>';
            var runtime= '<p class="runtime">runtime: '+data.runtime+'</p>';
            var urlPoster = '<img class="poster" src="'+data.urlPoster+'">';
            mymovies.append('<div class="movie">'+title + year + runtime+urlPoster+'</div>');
            
            
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
    
    
    }
    
}