JSFiddle - React, Tailwind, and code Playground

by Vitaliy T

HTML

<div class="user__comment">comment</div>

<div class="user__panel"> 
  <p class="user__name">
    <i class="user__prompt ">coment for</i>
    <span class="asked__him"> Amanda Bersh</span> 
    <i class="user__prompt">has sent</i>
    <span class="he__asked"> Nik House</span></p>
  <form action="">
    <textarea></textarea>
    <div class="user__select">
    <p class="user__file--form">
      <a href="#" class="user__choose">foto</a>  <a href="#" class="user__choose">video</a>
    </p>
    <a href="#" class="user__send">send</a>
    </div>
  </form>
  <div class="user__who--says">
    <img src="http://placehold.it/100x100/00f" alt="" width="63px" height="63px" class="user__image he__asked">
    <img src="http://placehold.it/100x100/f00" alt="" width="63px" height="63px" class="user__image asked__him">
  </div>
</div>

JavaScript

var topicuser = $(".asked__him").text();
var commentuser = $(".he__asked").text();

$(".user__comment").attr("tabindex","-1").css({"display":"inline-block","padding":"4px 0"});
$(".user__panel").append("<span class='trigger'>x</div>");
$(".trigger").attr("title","close");
$(".he__asked").attr("title", commentuser);
$(".asked__him").attr("title", topicuser);