Chapter 13

tailwindcss alert / アラート表示

knaka Tech-Blog
knaka Tech-Blog
2021.05.10に更新
このチャプターの目次

概要:

alertの表示例になります。


関連

https://v1.tailwindcss.com/components/alerts

画面

  • alert / warn / info


  • コード

https://github.com/kuc-arc-f/tailwind-sample/blob/main/src/02/02_alert.html

  • 背景、border , text-color等の設定のようです
02_alert.html
    Error:
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded" role="alert">
      <strong class="font-bold">Holy smokes!</strong><br />
      <span class="block sm:inline">Something seriously bad happened.</span>
    </div>
    <hr class="my-2" />
    Warn:
    <div class="bg-yellow-100 border border-yellow-500 text-yellow-700 p-4 rounded" role="alert">
      <p class="font-bold">Be Warned</p>
      <p>Something not ideal might be happening.</p>
    </div>
    <hr class="my-2" />
    info:
    <div class="bg-blue-100 border border-blue-500 text-blue-700 px-4 py-3 rounded" role="alert">
      <p class="font-bold">Informational message</p>
      <p class="text-sm">Some additional text to explain said message.</p>
    </div>


参考のデモページ

https://kuc-arc-f.github.io/tailwind-sample/src/02/02_alert.html

....