Pseudo-Elements pada Hover, Focus, dan Other States dalam Tailwind CSS (::placeholder)

Hello guys! Tailwind CSS merupakan Framework CSS yang banyak digunakan di Aplikasi Web Modern saat ini. Kali ini kita akan membuat Program Pseudo-Elements pada Hover, Focus, dan Other States dalam Tailwind CSS, khususnya pada ::placeholder.

Sumber : Tailwindcss.com

Berikan gaya pada teks placeholder di setiap input atau textarea menggunakan varian placeholder :

<input
  class="placeholder:text-gray-500 placeholder:italic ..."
  placeholder="Search for anything..."
  type="text"
  name="search"
/>

Contoh :

  <div class="mx-auto max-w-sm">
    <form>
      <label class="relative block"
        ><span class="absolute inset-y-0 left-0 flex items-center pl-2"
          ><svg class="h-5 w-5 fill-gray-300" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
              clip-rule="evenodd"
            ></path></svg></span
        ><span class="sr-only">Search</span
        ><input
          type="text"
          class="block w-full rounded-md border border-gray-300 py-2 pr-3 pl-9 text-gray-700 shadow-sm placeholder:text-gray-400 placeholder:italic focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm dark:border-gray-600 dark:text-white"
          placeholder="Search for anything..."
          name="search"
      /></label>
    </form>
  </div>

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)