JSFiddle - React, Tailwind, and code Playground

by fkhairzad

HTML

<div id="comments"></div>

<template id="comment-template">
  <li class="comment">
    <div class="comment-author"></div>
    <div class="comment-body"></div>
    <div class="comment-actions">
      <a href="#reply" class="reply">Reply</a>
    </div>
  </li>
</template>

<template id="card" class="card-container">
    <div class="card-title"></div>
    <div class="card-en"></div>
    <div class="card-jp"></div>
    <div class="card-kr"></div>
    <div class="card-footer"></div>
</template>

JavaScript

// An array of comments.
var comments = [
  {'author': 'Joe', 'body': 'I love this product.'},
  {'author': 'Mary', 'body': 'Great idea. I have got to get me one of these!'},
  {'author': 'Eric', 'body': 'These things are fantastic. I bought three.'}
];

// Get a reference to the comments list in the main DOM.
var commentsList = document.getElementById('comments');

// Loop through each of the comments and add them to the comments list.
for (var i = 0; i < comments.length; i++) {
  var comment = comments[i];
  var tmpl = document.getElementById('comment-template').content.cloneNode(true);
  tmpl.querySelector('.comment-author').innerText = comment.author;
  tmpl.querySelector('.comment-body').innerText = comment.body;
  commentsList.appendChild(tmpl);
}