<div class="space-y-4 p-4">
  <select class="peer w-min appearance-none border row-start-1 col-start-1 rounded-lg bg-slate-50 border-slate-300 text-slate-700 p-4">
    <option value="">配送方法を選択してください</option>
    <option value="standard">通常配送</option>
    <option value="express">スピード配送</option>
  </select>

  <div class="peer-has-[option[value='standard']:checked]:block hidden text-gray-600">
    通常配送は3-5営業日でお届けします
  </div>
  <div class="peer-has-[option[value='express']:checked]:block hidden text-red-600">
    スピード配送は翌営業日にお届けします
  </div>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com