Tailwind Alert

基本结构

alert组件容器

• 父级容器：采用相对定义因为内部按钮需要使用绝对定位

alert组件内部分为三部分，依次是

• 图标按钮：行内元素垂直居中
• 文本内容：行内元素垂直居中
• 关闭按钮：右上绝对定位

圆角填充提示栏

alert

<div class="relative px-6 py-4 border-0 rounded mb-4 bg-red-500 text-white">
    <span class="inline-block mr-5 align-middle text-xl">
      <i class="fa fa-bell"></i>
    </span>
    <span class="inline-block mr-8 align-middle">
      <b class="capitalize">Alert!</b>
      This is a alert - check it out!
    </span>
    <button class="absolute top-0 right-0 mt-4 mr-6 leading-none bg-transparent text-2xl font-semibold outline focus:outline-none">
      &times;
    </button>
</div>

矩形填充提示

alert

<div class="relative mb-2 px-4 py-3 bg-blue-500 text-sm text-white flex items-center" role="alert">
    <span class="w-4 h-4 mr-2 fa fa-info"></span>
    <span><strong class="mr-2">普通提示</strong><small>提示内容</small></span>
    <span class="absolute top-0 bottom-0 right-0 px-4 py-3">&times;</span>
</div>

左边框提示栏

alert

基本结构

<div class="mb-4 p-4 border-l-4 border-gray-400 bg-gray-200 text-gray-400" role="alert">
    <strong>警告</strong> 提示内容
</div>

默认颜色为gray，按需要修改颜色名称即可。

上边框的提示栏

alert

<div class="px-4 py-3 my-2 border-t-4 border-orange-500 rounded-b bg-orange-100 shadow-md flex items-center justify-start" role="alert">
    <span class="fa fa-info-circle fa-2x mr-4 text-orange-700"></span>
    <div><strong class="text-bold text-orange-700">严重警告</strong><p class="text-sm text-orange-400">提示内容</p></div>
</div>

带边框的提示框

alert

基本结构

<div class="relative mb-4 pl-4 pr-8 py-3 border border-gray-500 rounded bg-gray-100 text-gray-500" role="alert">
    <strong class="font-bold">警告</strong>
    <span class="block sm:inline">警告内容</span>
    <span class="absolute top-0 right-0 mt-3 mr-4 cursor-pointer">&times;</span>
</div>

带按钮的警告框

alert

<div class="mt-2 px-2 rounded-md shadow bg-white flex items-center">
    <div class="mr-6 -ml-3 px-4 py-2 bg-blue-500 text-center text-white">
        <i class="fa fa-user"></i>
    </div>
    <div class="flex items-center">
        <h2 class="mr-2 text-blue-500 font-bold">操作成功</h2>
        <p class="text-sm text-gray-500">提示内容</p>
    </div>
    <div class="flex-1 flex justify-end">
        <span class="text-blue-600 cursor-pointer">&times;</span>
    </div>
</div>