JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<div class="comment">
	<div class="comment__header">
		<strong>Вася Пупкин,</strong>&nbsp;<time class="comment__date">12-02-2014 12.00</time>
	</div>
	<div class="comment__text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum porro quasi iusto voluptas distinctio eos ullam sint dolorum tempora ratione sed saepe ipsa aliquid natus doloribus. Aspernatur error nesciunt modi.
	</div>
	<a class="comment__reply-link">ответить</a>
	<div class="comment__reply">
		<div class="comment">
			<div class="comment__header">
				<strong>Вася Пупкин,</strong>&nbsp;<time class="comment__date">12-02-2014 12.00</time>
			</div>
			<div class="comment__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum porro quasi iusto voluptas distinctio eos ullam sint dolorum tempora ratione sed saepe ipsa aliquid natus doloribus. Aspernatur error nesciunt modi.
			</div>
			<a class="comment__reply-link">ответить</a>
			<div class="comment__reply">
				
			</div>
		</div>
		<div class="comment">
			<div class="comment__header">
				<strong>Вася Пупкин,</strong>&nbsp;<time class="comment__date">12-02-2014 12.00</time>
			</div>
			<div class="comment__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum porro quasi iusto voluptas distinctio eos ullam sint dolorum tempora ratione sed saepe ipsa aliquid natus doloribus. Aspernatur error nesciunt modi.
			</div>
			<a class="comment__reply-link">ответить</a>
			<div class="comment__reply">
				
			</div>
		</div>
		<div class="comment">
			<div class="comment__header">
				<strong>Вася Пупкин,</strong>&nbsp;<time class="comment__date">12-02-2014 12.00</time>
			</div>
			<div class="comment__text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum porro quasi iusto voluptas distinctio eos ullam sint dolorum tempora ratione sed saepe ipsa aliquid natus doloribus. Aspernatur error nesciunt modi.
			</div>
			<a class="comment__reply-link">ответить</a>
			<div...

CSS

.comment {
    padding: 10px;
}
.comment .comment__reply .comment{
	margin-left:20px;
}
.comment__text {
    margin-bottom: 10px;
}
.comment__reply-link {
    color: #336699;
    border-bottom: 1px dotted;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-ms-transition: opacity 200ms;
	-o-transition: opacity 200ms;
	transition: opacity 200ms;
}
.comment:hover > .comment__reply-link {
    opacity: 1;
}