JSFiddle - React, Tailwind, and code Playground

HTML

<div class="options">
  <label>Post Type:</label>
  <select class="post-type">:
    <option value="new">Hot</option>
    <option value="new">New</option>
    <option value="top">Top</option>
    <option value="random">Random</option>
    <option value="rising">Rising</option>
    <option value="controversial">Controversial</option>
  </select>
</div>

<div class="post-container">
  <h3>posts from r/JavaScript</h3>
  <!-- <a class="post" href="(original link for post goes here)">
	   <div class="title"> title </div>
	   <div class="content"> content </div>
	   <div class="author"> author </div>
	</a>
	<a class="post" href="(original link for post goes here)">
	   <div class="title"> title </div>
	   <div class="content"> content </div>
	   <div class="author"> author </div>
	</a> -->
</div>

CSS

* {
  box-sizing: border-box;
  text-decoration: none;
  font-family: sans-serif;
  word-break: break-all;
}

.options {
  width: 165px;
  margin: 0 auto;
  font-weight: bold;
}

select {
  width: 75px;
  height: 40px;
  border-radius: 5px;
}

.post-container {
  width: 95%;
  height: auto;
  padding: 5px;
  margin: 15px auto;
  border-radius: 5px;
  background-color: #eee;
  /* border: 1px solid red; */
}

h3 {
  text-align: center;
}

.post {
  width: 95%;
  height: auto;
  display: block;
  padding: 10px;
  background-color: #fff;
  color: #000;
  margin: 10px auto;
  border-radius: 5px;
  box-shadow: 3px 3px 5px #ddd;
}

.post>* {
  display: block;
  margin: 5px;
  font-size: 16px;
}

.title {
  font-weight: bold;
}

.author {
  font-style: italic;
  font-size: 12px;
}

.content span {
  color: lightblue;
}

JavaScript

const dropdown = document.querySelector(".post-type");
const container = document.querySelector(".post-container");

const renderPosts = (postType) => {
  // Our proxy that makes cross origin fetching possible
  const proxy = "https://cors-anywhere.herokuapp.com/";

  fetch(`${proxy}https://www.reddit.com/r/javascript/${postType}.json`)
    .then(function(res) {
      // Return the response in JSON format
      return res.json();
    })
    .then(function(res) {
      // We render our posts to the UI in this block
      let currPost, markup = ``;

      // The array that contains our posts
      const postsArr = res.data.children;

      // Add a title based on post type
      markup = `<h3>${postType} posts from r/JavaScript</h3>`;

      // Iterate through our posts array and chain
      // the markup based on our HTML structure
      for (let i = 0; i < postsArr.length; i++) {
        currPost = postsArr[i].data; // a single post object
        markup += `
          <a class="post" href="https://www.reddit.com/${currPost.permalink}">
            <div class="title"> ${currPost.title} </div>
            <div class="content"> 
              ${currPost.selftext} 
              </br></br>
              <span>${currPost.url}</span>
            </div>
            <div class="author"> Posted by ${currPost.author} </div>
          </a>`;
      }
      // Insert the markup HTML to our container
      container.insertAdjacentHTML('afterbegin', markup);
    })
    .catch(function(err) {
      console.log(err); // Log error if any
    });
};


dropdown.addEventListener("change", () => {
  // Gets the currently selected option index
  let index = dropdown.selectedIndex;
  // Gets the currently selected option value
  let value = dropdown.options[index].value;

  renderPosts(value);
});

// Load hot posts on page load
renderPosts("hot");