JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Create SVGs with Javascript - Demo</title>
</head>
<body>
  <h1 class="site-header">
    Posts from today
  </h1>
  <main id="posts" class="post-list"></main>
  <script src="main.js"></script>
</body>

CSS

* {
  scroll-behavior: smooth;
}

body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background-color: blueviolet;
  margin: 0;
  padding: 0;
}

h1 {
  padding: 2rem 0;
  margin: 0;
}

.site-header {
  position: sticky;
  text-align: center;
  width: 100%;
  background-color: #fff;
}

.post-list {
  padding: 0 20vw;
}

.post-card {
  border-radius: 2rem;
  background-color: #fff;
  padding: 1rem 2rem;
  margin: 2rem;
}

.post-icon {
  transition: 0.25s all;
  border-radius: 0.25rem;
  height: 2rem;
  width: 2rem;
  margin-right: 0.5rem;
  padding: 0.25rem;
}

.post-icon:hover {
  transition: 0.5s all;
  background-color: blueviolet;
  stroke: white;
}

.post-header {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1200px) {
  .post-list {
    padding: 0 10vw;
  }
}

@media only screen and (max-width: 600px) {
  .post-list {
    padding: 0 2vw;
  }
}

JavaScript

function renderLinkIcon(node) {
  const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  const iconPath = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'path'
  );

  iconSvg.setAttribute('fill', 'none');
  iconSvg.setAttribute('viewBox', '0 0 24 24');
  iconSvg.setAttribute('stroke', 'black');
  iconSvg.classList.add('post-icon');

  iconPath.setAttribute(
    'd',
    'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'
  );
  iconPath.setAttribute('stroke-linecap', 'round');
  iconPath.setAttribute('stroke-linejoin', 'round');
  iconPath.setAttribute('stroke-width', '2');

  iconSvg.appendChild(iconPath);

  return node.appendChild(iconSvg);
}

async function getPostData() {
  const url = 'https://jsonplaceholder.typicode.com/posts';
  const response = await fetch(url);
  return await response.json();
}

function renderPosts(app, posts) {
  const postNodes = posts.map((post) => {
    // Create the DOM elements
    const postCard = document.createElement('div');
    const postHeader = document.createElement('div');
    const postTitleAnchor = document.createElement('a');
    const postTitle = document.createElement('h2');
    const postText = document.createElement('p');

    // Add some classes and attributes
    postCard.classList.add('post-card');
    postHeader.classList.add('post-header');
    postTitle.classList.add('post-title')
    postTitle.id = post.title;
    postTitleAnchor.href = '#' + post.title;

    // Place the text content
    postTitle.textContent = post.title;
    postText.textContent = post.body;

    // TODO: Add the icon here
    renderLinkIcon(postTitleAnchor);

    // Put together the DOM nodes
    postHeader.appendChild(postTitleAnchor)
    postHeader.appendChild(postTitle);
    postCard.appendChild(postHeader);
    postCard.appendChild(postText);
    app.appendChild(postCard);

    return postCard;
  });
  return...