<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kavendish/pen/aOdopx?q=comment&limit=all&type=type-pens" />
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">html, body {
background-color: #f0f2fa;
font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
color: #555f77;
-webkit-font-smoothing: antialiased;
}
input, textarea {
outline: none;
border: none;
display: block;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-size: 1rem;
color: #555f77;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #ced2db;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #ced2db;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #ced2db;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #ced2db;
}
p {
line-height: 1.3125rem;
}
.comments {
margin: 2.5rem auto 0;
max-width: 60.75rem;
padding: 0 1.25rem;
}
.comment-wrap {
margin-bottom: 1.25rem;
display: table;
width: 100%;
min-height: 5.3125rem;
}
.photo {
padding-top: 0.625rem;
display: table-cell;
width: 3.5rem;
}
.photo .avatar {
height: 2.25rem;
width: 2.25rem;
border-radius: 50%;
background-size: contain;
}
.comment-block {
padding: 1rem;
background-color: #fff;
display: table-cell;
vertical-align: top;
border-radius: 0.1875rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
.comment-block textarea {
width: 100%;
resize: none;
}
.comment-text {
margin-bottom: 1.25rem;
}
.bottom-comment {
color: #acb4c2;
font-size: 0.875rem;
}
.comment-date {
float: left;
}
.comment-actions {
float: right;
}
.comment-actions li {
display: inline;
margin: -2px;
cursor: pointer;
}
.comment-actions li.complain {
padding-right: 0.75rem;
border-right: 1px solid #e1e5eb;
}
.comment-actions li.reply {
padding-left: 0.75rem;
padding-right: 0.125rem;
}
.comment-actions li:hover {
color: #0095ff;
}
</style></head><body>
<div class="comments">
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/128.jpg')"></div>
</div>
<div class="comment-block">
<form action="">
<textarea name="" id="" cols="30" rows="3" placeholder="Add comment..."></textarea>
</form>
</div>
</div>
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg')"></div>
</div>
<div class="comment-block">
<p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit quasi
sapiente modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?</p>
<div class="bottom-comment">
<div class="comment-date">Aug 24, 2014 @ 2:35 PM</div>
<ul class="comment-actions">
<li class="complain">Complain</li>
<li class="reply">Reply</li>
</ul>
</div>
</div>
</div>
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/felipenogs/128.jpg')"></div>
</div>
<div class="comment-block">
<p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam.</p>
<div class="bottom-comment">
<div class="comment-date">Aug 23, 2014 @ 10:32 AM</div>
<ul class="comment-actions">
<li class="complain">Complain</li>
<li class="reply">Reply</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body></html>
