↝Tailwind Templates

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alert set 1

done

Succes alert

description text

info

Info alert

description text

warning

Warning alert

description text

report

Danger alert

description text

<!-- Success alert -->
<div class="flex bg-green-200 p-4">
  <div class="mr-4">
  	<div class="h-10 w-10 text-white bg-green-600 rounded-full flex justify-center items-center">
      <i class="material-icons">done</i>
    </div>
  </div>
  <div class="flex justify-between w-full">
    <div class="text-green-600">
      <p class="mb-2 font-bold">
        Succes alert
      </p>
      <p class="text-xs">
        description text
      </p>
    </div>
    <div class="text-sm text-gray-500">
       <span>x</span>
    </div>
  </div>
</div>

<!-- Info alert -->
<div class="flex bg-blue-200 p-4">
  <div class="mr-4">
  	<div class="h-10 w-10 text-white bg-blue-600 rounded-full flex justify-center items-center">
      <i class="material-icons">info</i>
    </div>
  </div>
  <div class="flex justify-between w-full">
    <div class="text-blue-600">
      <p class="mb-2 font-bold">
        Info alert
      </p>
      <p class="text-xs">
        description text
      </p>
    </div>
    <div class="text-sm text-gray-500">
       <p>x</p>
    </div>
  </div>
</div>


<!-- Warning alert -->
<div class="flex bg-orange-200 p-4">
  <div class="mr-4">
  	<div class="h-10 w-10 text-white bg-orange-600 rounded-full flex justify-center items-center">
      <i class="material-icons">warning</i>
    </div>
  </div>
  <div class="flex justify-between w-full">
    <div class="text-orange-600">
      <p class="mb-2 font-bold">
        Warning alert
      </p>
      <p class="text-xs">
        description text
      </p>
    </div>
    <div class="text-sm text-gray-500">
       <span>x</span>
    </div>
  </div>
</div>

<!-- Danger alert -->
<div class="flex bg-red-200 p-4">
  <div class="mr-4">
  	<div class="h-10 w-10 text-white bg-red-600 rounded-full flex justify-center items-center">
      <i class="material-icons">report</i>
    </div>
  </div>
  <div class="flex justify-between w-full">
    <div class="text-red-600">
      <p class="mb-2 font-bold">
        Danger alert
      </p>
      <p class="text-xs">
        description text
      </p>
    </div>
    <div class="text-sm text-gray-500">
      <p>x</p>
    </div>
  </div>
</div>
Alert rounded 1

Title

Lorem ipsum dolor sit amet.


play_for_work
<div class="flex w-64 items-center rounded-lg shadow-lg mb-4 flex bg-indigo-500 p-4 text-white">
	<div class="w-64">
	  <h4 class="mb-2 font-bold">Title</h4>
	  <p>Lorem ipsum dolor sit amet. </p>
	</div>
	<div class="w-12">
	  <i class="material-icons text-2xl p-2 bg-indigo-600 rounded-full">
		play_for_work
	  </i>
	</div>
</div>
Alert accent 1 
<div class="shadow" role="alert">
    <div class="flex">
      <div class="bg-blue-500 w-16 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-400 w-full p-4">
        <div>
          <p class="text-gray-600 font-bold">Information box</p>
          <p class="text-gray-600 text-sm">Your message has been send to Jack</p>
        </div>
      </div>
    </div>
</div>
Alert 2 
<div class="shadow bg-white rounded-full" role="alert">
    <div class="p-4 flex">
        <div class="w-24 bg-green-500 flex items-center text-white rounded-full justify-center">
            <i class="material-icons">call</i>
        </div>
        <div class="pl-2 text-gray-600">
            <p class="font-bold">Outgoing call</p>
            <p>Calling Jack Dozer · <span class="text-gray-500">9:32 pm - 5/6/2018</span></p>
        </div>
    </div>
</div>