JSFiddle - React, Tailwind, and code Playground

by Tobias Mesquita

HTML

<template id="tmplConteudo">
  <div class="container">
    <div class="avatar">

    </div>
    <div class="titulo">
      <a href="" title=""></a>
    </div>
    <div class="conteudo"></div>
    <div class="rodape"></div>
  </div>
</template>

<template id="tmplAnexo">
  <a class="link" href="" title="">
    <img class="thumbnail" src="" title="" />
  </a>
</template>

CSS

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
  margin: 0px;
  padding: 0px;
}

.container {
  position: relative;
  background-color: white;
  border-radius: 5px;
  margin: 5px;
  box-shadow: 0px 0px 5px black;
  height: 180px;
}

.container div {
  box-sizing: border-box;
}

.container .avatar {
  position: absolute;
  top: 0px;  
  bottom: 0px;
  left: 0px;
  width: 180px;
  border-right: 1px solid gainsboro;
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.container .titulo {
  position: absolute;
  top: 0px;  
  right: 0px;
  left: 180px;
  height: 30px;
  border-bottom: 1px solid gainsboro;
}

.container .conteudo {
  position: absolute;
  top: 30px;  
  right: 0px;
  bottom: 30px;
  left: 180px;
  border-bottom: 1px solid gainsboro;
}

.container .rodape {
  position: absolute;  
  right: 0px;
  bottom: 0px;  
  left: 180px;
  height: 30px;
  border-top: 1px solid gainsboro;
}

JavaScript

var tmplConteudo = document.getElementById("tmplConteudo").content;
var tmplAnexo = document.getElementById("tmplAnexo").content;
var url = "https://client-demo-accounts-2.bootstrap.fyre.co/bs3/v3.1/client-demo-accounts-2.fyre.co/379221/MjAxNjAxMjcxMjQyOmRlc2lnbmVyLWFwcC0xNDUzODQwMjgxODk0/init";

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url);
httpRequest.responseType = "json";
httpRequest.addEventListener("readystatechange", function () {
  if (httpRequest.readyState == 4){
    if (httpRequest.status == 200){    
      var contents = httpRequest.response.headDocument.content;
      var conteudos = [];
      contents.forEach(function (content, indice) {
        var author = httpRequest.response.headDocument.authors[content.content.authorId];
        if (author && content.content.bodyHtml) {
          var conteudo = {};
          conteudo.authorAvatar = author.avatar;
          conteudo.authorName = author.displayName;
          conteudo.authorUrl = author.profileUrl;
          conteudo.bodyHtml = content.content.bodyHtml;
          conteudo.createdAt = content.content.createdAt;
          conteudo.anexos = [];
          if (content.content.attachments) {
            conteudo.anexos = content.content.attachments.map(function (attachment, indice) {
              var anexo ={}; 
              anexo.thumbnail_url = attachment.thumbnail_url;
              anexo.title = attachment.title;
              anexo.url = attachment.url;
              return anexo;          
            });
          }
          conteudos.push(conteudo);
        }
      });

      conteudos.forEach(function (conteudo, indice) {
        var node = {};
        node.fragment = document.importNode(tmplConteudo, true);
        node.container = node.fragment.querySelector(".container");
        node.avatar = node.container.querySelector(".avatar");
        node.titulo = node.container.querySelector(".titulo");
        node.conteudo = node.container.querySelector(".conteudo");
  ...