Pseudo-Classes pada Hover, Focus, dan Other States dalam Tailwind CSS (Styling based on Sibling State)

<form>
  <label class="block">
    <span class="...">Email</span>
    <input type="email" class="peer ..." />
    <p class="invisible peer-invalid:visible ...">Please provide a valid email address.</p>
  </label>
</form>

<div
  class="mx-auto max-w-md border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10"
>
  <form>
    <div>
      <label
        for="email-2"
        class="block text-sm font-medium text-gray-700 dark:text-gray-300"
        >Email</label
      >
      <div class="mt-1">
        <input
          type="email"
          id="email-2"
          class="peer block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm"
          placeholder="you@example.com"
          name="email"
          value="george@krugerindustrial."
        />
        <p class="invisible mt-2 text-sm text-pink-600 peer-invalid:visible">
          Please provide a valid email address.
        </p>
      </div>
    </div>
  </form>
</div>

<fieldset>
  <legend>Published status</legend>
  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>
  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>
  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

<fieldset
  class="mx-auto max-w-md border-x border-x-gray-200 p-8 text-sm text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-100"
>
  <div
    class="mb-6 border-b border-gray-200 pb-2 text-base font-semibold dark:border-gray-800"
  >
    Published status
  </div>
  <input
    id="draft"
    class="peer/draft form-radio mr-2 mb-0.5 border-gray-300 text-sky-400 focus:ring-sky-400"
    type="radio"
    name="status"
    checked=""
  /><label class="font-medium peer-checked/draft:text-sky-500" for="draft"
    >Draft</label
  ><input
    id="published"
    class="peer/published form-radio mr-2 mb-0.5 ml-4 border-gray-300 text-sky-400 focus:ring-sky-400"
    type="radio"
    name="status"
  /><label
    class="font-medium peer-checked/published:text-sky-500"
    for="published"
    >Published</label
  >
  <div
    class="mt-4 hidden text-gray-500 peer-checked/draft:block dark:text-gray-400"
  >
    Drafts are only visible to administrators.
  </div>
  <div
    class="mt-4 hidden text-gray-500 peer-checked/published:block dark:text-gray-400"
  >
    Your post will be publicly visible on your site.
  </div>
</fieldset>