# Comments

## Comments

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LC9VBEfJfUfJZMWYHtM%2F-LC9VL84JlpftuKI9G1j%2Fcard%20comment.PNG?alt=media\&token=c8056edd-8185-430a-99a6-14d6f1036595)

```markup
<div class="shadow-md p-4 rounded">
	<div class="flex">
	  <img class="shadow sm:w-12 sm:h-12 w-10 h-10 rounded-full mr-4" src="../images/link.jpg" alt="Avatar">
	  <div>
		<h4 class="text-grey-darker">John</h4>
		<p class="text-grey-dark text-sm">10:00 AM - Apr 10, 2018 </p>
		<p class="leading-tight text-grey-darker mt-2">
		  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
	  </div>
	</div>
	<div class="mt-4">
	  <button class="text-grey-dark hover:text-grey-darker mr-2">
		<i class="material-icons">
		  favorite_border
		</i>
	  </button>
	  <button class="text-grey-dark hover:text-grey-darker mr-2">
		<i class="material-icons">
		  add_comment
		</i>
	  </button>
	</div>
</div>
```
