Alerts

Alert

Simple accent with icon

<div class="shadow" role="alert">
    <div class="flex">
      <div class="bg-blue w-1/6 text-center p-2">
        <div class="flex justify-center h-full items-center">
          <i class="material-icons text-white">info_outline</i>
        </div>
      </div>
      <div class="bg-white border-r-4 border-blue-light w-full p-4">
        <div>
          <p class="text-grey-dark font-bold">Information box</p>
          <p class="text-grey-dark">Your message has been send to Jack</p>
        </div>
      </div>
    </div>
  </div>

Rounded

<div class="shadow bg-white rounded-full" role="alert">
    <div class="p-4 flex">
        <div class="w-1/5 bg-green flex items-center text-white rounded-full justify-center">
            <i class="material-icons">call</i>
        </div>
        <div class="pl-2 text-grey-dark">
            <p class="font-bold">Outgoing call</p>
            <p>Calling Jack Dozer · <span class="text-grey">9:32 pm - 5/6/2018</span></p>
        </div>
    </div>
</div>

Simple

<div class="flex items-center rounded-lg shadow-lg mb-4 flex bg-indigo p-4 text-white">
	<div class="w-5/6">
	  <h4 class="mb-2">Title</h4>
	  <p>Lorem ipsum dolor sit amet. </p>
	</div>
	<div class="w-1/6">
	  <i class="material-icons text-5xl bg-indigo-dark rounded-full">
		play_for_work
	  </i>
	</div>
</div>