JSFiddle - React, Tailwind, and code Playground

HTML

<main></main>

JavaScript

const API_URL = 'https://api.nasa.gov/planetary/apod?api_key={KEY}&start_date=2022-01-01&end_date=2022-02-01';

//create some HTML for a post entry
function createPost(postData) {
	return $(`
  	<section>
    	<img class="img1" src="${postData.url}" alt="${postData.title}">
      <span class="name">${postData.title}</span>
      <span class="date">${postData.date}</span>
      <p>${postData.explanation}</p>
    </section>
  `);
}

//when document is ready...
$(function() {

	//get data from NASA...
  $.get(API_URL)
  	.done(function(data) {
    	//success!
      
      //let's get the <main> element just once
    	const $main = $('main');
    
    	//let's iterate the data array...
      $(data).each(function(i, post) {
      	//...and create some HTML for the post
				const $post = createPost(post);
        //...and then append it to the <main> element
        $main.append($post);
      })
  	})
    .fail(function(response) {
    	//something went wrong!
	    console.error(response);
    	alert('There was an error!');
    });
});