Modals

Basic

Text only

Text & Button

<div class="shadow-lg">
	<div class="p-4">
	  <div class="flex justify-between">
		<h3>Title</h3>
		<button>
		  <i class="material-icons text-base hover:text-grey">
			close
		  </i>
		</button>
	  </div>
	  <div class="mt-2 py-2">
		<p class="leading-normal">
		  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	  </div>
	  <div>
		<button class="flex items-center shadow bg-teal px-4 py-2 text-white hover:bg-teal-light">
		  Button
		</button>
	  </div>
	</div>
</div>

Confirmation

Simple

<div class="shadow-lg">
	<div class="p-4">
	  <div class="flex justify-end">
		<button>
		  <i class="material-icons text-base hover:text-grey">
			close
		  </i>
		</button>
	  </div>
	  <div class="mt-2 py-2 flex">
		<span class="mr-2">
		  <i class="material-icons text-red">
		  error
		  </i>
		</span>
		<p class="leading-normal">Are you sure you want to continue?</p>
	  </div>
	</div>
	<div>
	  <div class="flex mb-4">
		<button class="w-1/2 py-2 text-white bg-red-light hover:bg-red-lighter">
		  <p>Close</p>
		</button>
		<button class="w-1/2 py-2 text-white bg-green-light hover:bg-green-lighter ">
		  <p>Continue</p>
		</button>
	  </div>
	</div>
</div>