Utility

Contacts

 <div class="shadow-md p-4 rounded-lg">
	<div class="flex justify-between p-2">
	  <h4>Contacts</h4>
	  <button class="hover:text-grey">
		<i class="material-icons">
		  filter_list
		</i>
	  </button>
	</div>
	<div class="mt-6">
	  <div class="flex justify-between p-2 hover:bg-grey-lightest cursor-pointer">
		<div class="flex">
		  <div class="mr-2">
			<img class="shadow sm:w-12 sm:h-12 w-10 h-10 rounded " src="../images/zellda.jpg" alt="Avatar">
		  </div>
		  <div>
			<p class="text-lg text-grey-darkest">Zelda</p>
			<p class="text-sm text-grey-dark">Hyrule</p>
		  </div>
		</div>
		<div class="flex items-center">
		  <button class="p-1 text-grey-darker hover:text-grey">
			<i class="material-icons">
			  message
			</i>
		  </button>
		  <button class="p-1 text-grey-darker hover:text-grey">
			<i class="material-icons">
			  favorite_border
			</i>
		  </button>
		  <button class="p-1 text-grey-darker hover:text-grey">
			<i class="material-icons">
			  delete_outline
			</i>
		  </button>
		</div>
	  </div>
	</div>
 </div>