JSFiddle - React, Tailwind, and code Playground

by db_dev

HTML

<!-- ko foreach: ChatEntries -->
<div class="chat-entry">
  <!-- ko if: $index() === 0 -->
  <span class="entry-sender">img</span>
  <span class="entry-content" data-bind="html: Content"></span>
  <!-- /ko -->

  <!-- ko if: $parent.ChatEntries()[$index()-1]-->
  
  <!-- ko if: user !== ($parent.ChatEntries()[$index()-1].user)-->
  <span class="entry-sender">img</span>
  <span class="entry-content" data-bind="html: Content"></span>
  <!-- /ko -->
  
  <!-- ko if: user === ($parent.ChatEntries()[$index()-1].user)-->
  <span class="entry-content" data-bind="html: Content"></span>
  <!-- /ko -->
  
  <!-- /ko -->
</div>
<!-- /ko -->

JavaScript

var viewModel = {
  ChatEntries: ko.observableArray([{
    Content: "content 1",
    user: "user 1"
  }, {
    Content: "content 2",
    user: "user 1"
  }, {
    Content: "content 3",
    user: "user 2"
  }])

};

ko.applyBindings(viewModel);