Tailwind Components - Information Boxes

Information Boxes

Information Box Border Left

We cannot ship to your adres

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.

Order is no longer available

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.

Order succesfully placed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.

Order was cancelled

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.

<div class="grid grid-cols-12 gap-6">
    <!-- Info -->
    <div class="col-span-12 md:col-span-6">
      <div class=" bg-white border-l-4 shadow rounded border-blue-500">
        <div class="px-4 py-5 sm:p-6 flex items-start">
          <div>
            <svg class="h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>

          <div class="ml-3 flex flex-col">
            <div class="leading-none font-medium text-gray-900">
              We cannot ship to your adres
            </div>
            <div class="text-gray-500 text-sm mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.
            </div>

            <div class="mt-5">
              <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-blue-800 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Warning -->
    <div class="col-span-12 md:col-span-6">
      <div class="bg-white border-l-4 shadow rounded border-yellow-400">
        <div class="px-4 py-5 sm:p-6 flex items-start">
          <div>
            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
          </div>

          <div class="ml-3 flex flex-col">
            <div class="leading-none font-medium text-gray-900">
              Order is no longer available
            </div>
            <div class="text-gray-500 text-sm mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.
            </div>

            <div class="mt-5">
              <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-yellow-800 bg-yellow-100 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Success -->
    <div class="col-span-12 md:col-span-6">
      <div class="bg-white border-l-4 shadow rounded border-green-400">
        <div class="px-4 py-6 sm:p-6 flex items-start">
          <div>
            <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
          </div>

          <div class="ml-3 flex flex-col">
            <div class="leading-none font-medium text-gray-900">
              Order succesfully placed
            </div>
            <div class="text-gray-500 text-sm mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.
            </div>

            <div class="mt-5">
              <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-green-800 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Error -->
    <div class="col-span-12 md:col-span-6">
      <div class="bg-white border-l-4 shadow rounded border-red-400">
        <div class="px-4 py-5 sm:p-6 flex items-start">
          <div>
            <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
            </svg>
          </div>

          <div class="ml-3 flex flex-col">
            <div class="leading-none font-medium text-gray-900">
              Order was cancelled
            </div>
            <div class="text-gray-500 text-sm mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.
            </div>

            <div class="mt-5">
              <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-800 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Information Box Border Top

We cannot ship to your adres

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.

Order is no longer available

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.

Order succesfully placed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.

Order was cancelled

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.

<div class="grid grid-cols-12 gap-6">
    <!-- Info -->
    <div class="col-span-12 md:col-span-6">
      <div class=" bg-white border-t-4 shadow rounded border-blue-500">
        <div class="px-4 py-5 sm:p-6 flex items-start">
          <div>
            <svg class="h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>

          <div class="ml-3 flex flex-col">
            <div class="leading-none font-medium text-gray-900">
              We cannot ship to your adres
            </div>
            <div class="text-gray-500 text-sm mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.
            </div>

            <div class="mt-5">
              <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-blue-800 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Warning -->
    <div class="col-span-12 md:col-span-6">
      <div class="bg-white border-t-4 shadow rounded border-yellow-400">
        <div class="px-4 py-5 sm:p-6 flex items-start">
          <div>
            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
          </div>

          <div class="ml-3 flex flex-col">
            <div class="leading-none font-medium text-gray-900">
              Order is no longer available
            </div>
            <div class="text-gray-500 text-sm mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.
            </div>

            <div class="mt-5">
              <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-yellow-800 bg-yellow-100 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Success -->
    <div class="col-span-12 md:col-span-6">
      <div class="bg-white border-t-4 shadow rounded border-green-400">
        <div class="px-4 py-6 sm:p-6 flex items-start">
          <div>
            <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
          </div>

          <div class="ml-3 flex flex-col">
            <div class="leading-none font-medium text-gray-900">
              Order succesfully placed
            </div>
            <div class="text-gray-500 text-sm mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.
            </div>

            <div class="mt-5">
              <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-green-800 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Error -->
    <div class="col-span-12 md:col-span-6">
      <div class="bg-white border-t-4 shadow rounded border-red-400">
        <div class="px-4 py-5 sm:p-6 flex items-start">
          <div>
            <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
            </svg>
          </div>

          <div class="ml-3 flex flex-col">
            <div class="leading-none font-medium text-gray-900">
              Order was cancelled
            </div>
            <div class="text-gray-500 text-sm mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor feugiat ipsum, et ultrices velit efficitur eget.
            </div>

            <div class="mt-5">
              <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-800 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

👨‍💻 Kars van Iersel

Information Boxes

Information Box Border Left

Information Box Border Top

Like what you see? Consider following me on Twitter.