TailwindCSSでコールアウトを作る

ワンポイント

1. 控えめな強調
2. アクション アクションを付け加える

Notion スタイル

Info

<div class="flex items-start gap-2 rounded-md bg-blue-50 px-4 py-4">
  <i class="ri-information-line text-2xl text-blue-500"></i>
  <div class="text-sm whitespace-pre-wrap">
    {`このページは準備中です。\n是非フィードバックをお願いします。`}
  </div>
</div>

Warning

<div class="flex items-start gap-2 rounded-md bg-yellow-50 px-4 py-4">
  <i class="ri-information-line text-2xl text-yellow-500"></i>
  <div class="text-sm whitespace-pre-wrap">
    {`このページは準備中です。\n是非フィードバックをお願いします。`}
  </div>
</div>

Note

<div class="flex items-start gap-2 rounded-md bg-gray-100 px-4 py-4">
  <i class="ri-information-line text-2xl text-gray-500"></i>
  <div class="text-sm whitespace-pre-wrap">
    {`このページは準備中です。\n是非フィードバックをお願いします。`}
  </div>
</div>

GitHub スタイル