JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://santeh-diskont.ru/media/js/ckeditor/ckeditor.js"></script>
<script src="http://santeh-diskont.ru/media/js/ckeditor/adapters/jquery.js"></script>
<div class="comments">
<div class="comment" id="comment-1">
<p>Комментарий 1</p>
<span class="reply">Ответить</span>
</div>
<div class="comment" id="comment-2">
<p>Комментарий 2</p>
<span class="reply">Ответить</span>
</div>
<div class="comment" id="comment-3">
<p>Комментарий 3</p>
<span class="reply">Ответить</span>
</div>
</div>
<div class="addComment">
<h4>Добавить комментарий</h4>
<textarea class="editor"></textarea>
</div>
CSS
* {
font-family: Arial;
}
.comments {
}
.comments .comment {
border: 1px solid #e5e5e5;
padding: 4px 7px;
margin-bottom: 10px;
font-size: 13px;
}
.addComment {
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
padding: 5px 10px 20px;
margin-top: 20px;
}
.reply {
border-bottom: 1px dotted #08c;
color: #08c;
cursor: pointer;
}
JavaScript
$('.editor').ckeditor({
toolbar: 'Public'});
$('.reply').click(function(){
form = $('.addComment');
$(this).before(form);
return false;
});