Tailwind Form

基础表单

form

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-12 bg-gray-100 flex items-center justify-center">
  <form action="" class="w-full max-w-lg">
    <div class="flex flex-wrap flex-col mb-6 w-full">
      <label for="username" class="block mb-2 text-md text-gray-700 font-bold tracking-wide">账号</label>
      <input type="text" class="block px-4 py-3 mb-2 w-full border border-gray-200 rounded bg-white leading-tight appearance-none focus:outline-none focus:bg-white focus:border-gray-500">
      <p class="text-xs text-gray-600">提示文本</p>
    </div>
    <div class="flex flex-wrap flex-col mb-6 w-full">
      <label for="" class="block mb-2 text-md text-gray-700 font-bold tracking-wide">内容</label>
      <textarea class="no-resize resize-none appearance-none block w-full h-48 px-4 py-3 mb-2 border border-gray-200 rounded bg-white leading-tight focus:outline-none focus:bg-white focus:border-gray-500"></textarea>
      <p class="text-xs text-gray-600">提示文本</p>
    </div>
    <div class="md:flex md:items-center">
      <div class="md:w-1/3">
        <button class="px-4 py-2 rounded bg-teal-400 shadow text-white font-bold focus:outline-none focus:shadow-outline hover:bg-teal-400">确定</button>
      </div>
    </div>
  </form>
</div>