@extends('layouts.master')
@section('tailwind')
    <link rel="stylesheet" href="{{asset('/css/tailwind.min.css')}}">
@endsection

@section('content')
@include('partials.containers-header')

<h2>Alerts</h2>

<div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
  <div class="flex">
    <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
    <div>
      <p class="font-bold">Our privacy policy has changed</p>
      <p class="text-sm">Make sure you know how these changes affect you.</p>
    </div>
  </div>
</div>

<div class="mt-2 bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
  <p class="font-bold">Be Warned</p>
  <p>Something not ideal might be happening.</p>
</div>

<!-- 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>

<hr class="mt-4 mb-4">
<h2>Buttons</h2>
<!-- Using utilities: -->
<button class="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>


<!-- Extracting component classes: -->
<button class="m2-2 btn btn-blue">
  Button
</button>

<style>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }
</style>

<button class="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
  Button
</button>

<button class="mr-2 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
  Button
</button>

<button class="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded">
  Button
</button>

<button class="mr-2 bg-blue-500 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
  Button
</button>

<hr class="mt-4 mb-4">

<button class="mr-2 bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">
  Button
</button>

<button class="mr-2 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow-sm">
  Button
</button>

<div class="inline-flex">
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l">
    Prev
  </button>
  <button class="mr-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r">
    Next
  </button>
</div>

<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
  <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
  <span>Download</span>
</button>



@include('partials.containers-footer')
@endsection