<!--
  This example requires Tailwind CSS v2.0+

  This example requires some changes to your config:

  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
<template>
    <div>
        <div class="mt-5 md:mt-0 md:col-span-2">
            <form action="#" method="POST">
                <div class="shadow sm:rounded-md sm:overflow-hidden">
                    <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
                        <div class="grid grid-cols-3 gap-6">
                            <div class="col-span-3 sm:col-span-3">
                                <label
                                    for="company-website"
                                    class="block text-sm font-medium text-gray-700"
                                >
                                    제목
                                </label>
                                <div class="mt-1 flex rounded-md shadow-sm">
                                    <input
                                        id="company-website"
                                        type="text"
                                        name="company-website"
                                        class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
                                        placeholder=""
                                    />
                                </div>
                            </div>
                        </div>

                        <div>
                            <label
                                for="about"
                                class="block text-sm font-medium text-gray-700"
                            >
                                내용
                            </label>
                            <div class="mt-1">
                                <textarea
                                    id="about"
                                    name="about"
                                    rows="7"
                                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                    placeholder=""
                                />
                            </div>
                            <p class="mt-2 text-sm text-gray-500">
                                모욕적인 표현이 포함된 경우 저장을 하실 수
                                없습니다.
                            </p>
                        </div>
                    </div>
                    <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                        <button
                            type="submit"
                            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        >
                            Save
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
