JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<div class="comment-thread">
    
    <!-- Comment 1 start -->
    <details open class="comment" id="comment-1">
      <a href="#comment-1" class="comment-border-link"></a>    
      <summary>
            <div class="comment-heading">
                <div class="comment-voting">
                    <button><span>&#9650;</span></button>
                    <button type="button"><span>&#9660;</span></button>
                </div>
                <div class="comment-info">
                    <a href="#" class="comment-author">jardazbrna</a>
                    <p>před 4mi dny</p>
                </div>
            </div>
        </summary>

        <div class="comment-body">
            <p>Lorem ipsum bla bla tohle je nějaký komentář protože lidi rádi komentujou a strašně je to baví.</p>
            <div class="comment-functions">
              <button data-toggle="reply-form" data-target="comment-1-reply-form">Odpovědět</button>
              <button>Skrýt</button>
              <button>Blokovat</button>
            </div>

            <!-- Reply form  -->
            <form method="POST" class="reply-form d-none" id="comment-1-reply-form">
                <textarea placeholder="Reagovat na komentář" rows="4"></textarea>
                <div class="reply-functions">
                  <button type="reset" data-toggle="reply-form" data-target="comment-1-reply-form">Zrušit</button>
                  <button type="submit">Odeslat</button>
                </div>
            </form>
            <!-- /Reply form -->
        </div>

        <div class="replies">
            <!-- Comment 2 -->
            <details open class="comment" id="comment-2">
                <a href="#comment-2" class="comment-border-link"></a>
                <summary>
                  <div class="comment-heading">
                      <div class="comment-voting">
                          <button><span>&#9650;</span></button>
                          <button...

CSS

* { box-sizing: border-box;}
body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height: 1.4; color: rgba(0, 0, 0, 0.85); background-color: #f9f9f9}
.comment-thread { width:450px !important}
/* /demo */





.comment-thread {font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 100%; max-width: 100%; margin: auto; padding: 0 15px; background-color: #fff; border: 1px solid transparent; }
.comment-thread button { -moz-appearance: none; -webkit-appearance: none;   appearance: none;
  padding: 4px 8px;  color: #666;  background-color: #fff;  border: 1px solid rgba(0, 0, 0, 0.2);  border-radius: 4px;}
.comment-thread button:hover,
.comment-thread button:focus,
.comment-thread button:active { cursor: pointer; background-color: #ecf0f1}

.comment { position: relative; margin: 10px auto}
.comment-heading { display: flex; align-items: center; }
.comment-voting { width: 20px; height: 32px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px}
.comment-voting button { display: block; width: 100%; height: 50%; padding: 0; border: 0; font-size: 10px;}

.comment-info {  color: #999; margin-left: 10px}
.comment-info p { margin: 0}
.comment-author { color: #333; font-weight: bold; text-decoration: none}
.comment-author:hover { text-decoration: underline}
.comment-thread .replies {  margin-left: 20px}
.comment-border-link { display: block; position: absolute; top: 50px; left: 3px; width: 12px; height: calc(100% - 50px); border-left: 4px solid transparent; border-right: 4px solid transparent; background-color: #eee; background-clip: padding-box;}
.comment-border-link:hover { background-color: #aaa}
.comment-body { padding: 0 20px; padding-left: 28px}
.comment-functions { display:flex; gap:6px; margin-bottom: 2em;}

.comment-thread details.comment summary { position: relative; list-style: none; cursor: pointer}
.comment-thread details.comment...

JavaScript

document.addEventListener(
    "click",
    function(event) {
        var target = event.target;
        var replyForm;
        if (target.matches("[data-toggle='reply-form']")) {
            replyForm = document.getElementById(target.getAttribute("data-target"));
            replyForm.classList.toggle("d-none");
        }
    },
    false
);