Myna UI

Files

<div class="w-full space-y-0.5">
  <label for="photo" class="text-xs font-medium text-gray-500"> Your Photo </label>
  <input
    id="photo"
    type="file"
    class="block w-full cursor-pointer appearance-none rounded-md border border-gray-200 bg-white px-3 py-2 text-sm transition focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<div class="w-full space-y-0.5">
  <label for="photo-disabled" class="text-xs font-medium text-gray-500"> Your Photo </label>
  <input
    disabled
    type="file"
    id="photo-disabled"
    class="block w-full cursor-pointer appearance-none rounded-md border border-gray-200 bg-white px-3 py-2 text-sm transition focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<label
  class="flex w-full cursor-pointer appearance-none justify-center rounded-md border border-dashed border-gray-300 bg-white px-3 py-6 text-sm transition hover:border-gray-400 focus:border-solid focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75"
  tabindex="0">
  <span for="photo-dropbox" class="flex items-center space-x-2">
    <svg class="h-6 w-6 stroke-gray-400" viewBox="0 0 256 256">
      <path
        d="M96,208H72A56,56,0,0,1,72,96a57.5,57.5,0,0,1,13.9,1.7"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></path>
      <path
        d="M80,128a80,80,0,1,1,144,48"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></path>
      <polyline
        points="118.1 161.9 152 128 185.9 161.9"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></polyline>
      <line
        x1="152"
        y1="208"
        x2="152"
        y2="128"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
    </svg>
    <span class="text-xs font-medium text-gray-600">
      Drop files to Attach, or
      <span class="text-blue-600 underline">browse</span>
    </span>
  </span>
  <input id="photo-dropbox" type="file" class="sr-only" />
</label>
<div class="w-full space-y-0.5">
  <label for="photo-error" class="text-xs font-medium text-gray-500"> Your Photo </label>
  <input
    type="file"
    id="photo-error"
    class="block w-full cursor-pointer appearance-none rounded-md border border-gray-200 bg-white px-3 py-2 text-sm transition focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<p class="mt-1 text-xs font-medium text-red-600">Don't you get it yet? Nothing works.</p>

Don't you get it yet? Nothing works.

<label for="photobutton" class="text-xs font-medium text-gray-500"> Your Photo </label>
<div class="relative z-0 mt-0.5 flex w-full -space-x-px">
  <input
    id="photobutton"
    type="file"
    class="block w-full cursor-pointer appearance-none rounded-l-md border border-gray-200 bg-white px-3 py-2 text-sm transition focus:z-10 focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <button
    type="submit"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded-r border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    Save
  </button>
</div>