JSFiddle - React, Tailwind, and code Playground

by jestho

HTML

<section class="comments">
	
	<article class="comment">

		<header>
			<a href="#user"><figure><img src="http://placekitten.com/100/100" alt=""></figure><strong>Username</strong></a>
			<time>January 15, 10:43</time>
		</header>
		
		<p>
			Sed posuere consectetur est at lobortis. Donec sed odio dui.
			Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus,
			tellus ac cursus commodo, tortor mauris condimentum nibh,
			ut fermentum massa justo sit amet risus.
		</p>
		
		<div class="replies">
			
			<article class="reply">
				<header>
					<a href="#user"><figure><img src="http://placekitten.com/100/100" alt=""></figure><strong>Username</strong></a>
					<time>January 15, 10:43</time>
				</header>
				
				<p>
					Sed posuere consectetur est at lobortis. Donec sed odio dui.
					Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus,
					tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus.
				</p>
			</article>
			
			<article class="reply">
				<header>
					<a href="#user"><figure><img src="http://placekitten.com/100/100" alt=""></figure><strong>Username</strong></a>
					<time>January 15, 10:43</time>
				</header>
				
				<p>
					Sed posuere consectetur est at lobortis. Donec sed odio dui.
					Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus,
					tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus.
				</p>
			</article>
			
		</div>
		
		<footer>
			<textarea placeholder="Your reply…"></textarea>
		</footer>

	</article>
	
	<article class="comment">

		<header>
			<a href="#user"><figure><img src="http://placekitten.com/100/100" alt=""></figure><strong>Username</strong></a>
			<time>January 15, 10:43</time>
		</header>
		
		<p>
			Sed posuere consectetur est at lobortis. Donec sed odio dui.
			Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus,
			tellus ac cursus commodo, tortor mauris...

SCSS

$avatar_size: 60px;
$avatar_size_reply: $avatar_size * .5;

* {
	@include box-sizing(border-box);
}

body {
  border-radius: 5px;
	font: 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 10% auto;
	width: 80%;
	text-rendering: optimizelegibility;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
}

.comments {
	font-size: .9em;

	// Generic
	header {

		a {
			color: #666;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}

		figure {
			background: #eee;
			border-radius: $default_radius;
			margin: 0;

			img {
				display: block;
				border-radius: $default_radius;
			}
		}

		time {
			color: #888;
			font-size: .75em;
			margin-left: .5em;
		}

		menu {
			@extend .btn-group;

			display: none;
			float: right;
			margin: 0;
			padding: 0;

			button {
				@extend .btn-small;
			}
		}
	}

	p {
		line-height: 1.4em;
	}

	// Parent Comment
	.comment {
		border: 1px solid #eee;
		border-radius: $default_radius;
		box-shadow: 0 1px 5px rgba(#000,.05);
		margin-bottom: 1em;
		margin-left: $avatar_size + 20px;
		min-height: $avatar_size;
		position: relative;

		&:after, &:before {
			border: solid transparent;
			content: " ";
			pointer-events: none;
			position: absolute;
				top: $avatar_size - 10;
				right: 100%;
			width: 0;
			height: 0;
		}

		&:after {
			border-right-color: #fff;
			border-width: 10px;
			margin-top: -30px;
		}

		&:before {
			border-right-color: #eee;
			border-width: 12px;
			margin-top: -32px;
		}

		> header {
			@include clearfix();

			border-bottom: 1px solid #f9f9f9;
			padding: 1em;
			line-height: 1.5em;

			figure {
				position: absolute;
					top: 0;
					left: - $avatar_size - 20px;

				img {
					width: $avatar_size;
				}
			}
		}

		> p {
			padding: 0 1em;
		}

		> footer {
			background: #fcfcfc;
			border-top: 1px solid #eee;
			border-radius: 0 0 $default_radius $default_radius;
			padding: .5em;

			textarea {
				border: 1px solid...