Forms 구성 요소

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6 flex items-center justify-center">
  <div class="container max-w-screen-lg mx-auto">
    <div>
      <h2 class="text-center text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6">Create New Post</h2>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow complex-3d-element p-4 px-4 md:p-8 mb-6 border border-gray-300 dark:border-gray-700">
        <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-3">
          <div class="text-gray-600 dark:text-gray-400 complex-3d-text">
            <p class="font-medium text-lg">Post Details</p>
            <p>Please fill out all the fields.</p>
          </div>
          <div class="lg:col-span-2">
            <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-5">
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                <input type="text" name="title" id="title" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" value="" placeholder="Post Title" />
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Content</label>
                <textarea name="content" id="content" class="h-24 md:h-32 border mt-1 rounded px-4 py-2 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" placeholder="Write your post content here..."></textarea>
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
                <input type="text" name="tags" id="tags" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" value="" placeholder="Comma separated tags" />
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                  <label for="media" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Upload Media</label>
                  <div class="flex items-center space-x-4 mt-1">
                      <label class="flex items-center justify-center w-full h-20 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-md cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 complex-3d-upload complex-3d-input">
                          <div class="text-center">
                              <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                              </svg>
                              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Drag and drop or click to upload</p>
                          </div>
                          <input type="file" id="media" name="media" class="hidden" />
                      </label>
                  </div>
              </div>
              <div class="md:col-span-5 text-right complex-3d-button-container">
                <div class="inline-flex items-end">
                  <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded complex-3d-button dark:bg-blue-700 dark:hover:bg-blue-800">Post</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.complex-3d-element {
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(10deg);
  transition: transform 0.3s ease-in-out;
}

.complex-3d-element:hover {
  transform: rotateX(0deg) rotateY(0deg);
}

.complex-3d-text {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.complex-3d-input-container {
  perspective: 1000px;
}

.complex-3d-input {
  transform: translateZ(20px);
  transition: transform 0.3s ease-in-out;
}

.complex-3d-input:focus {
  transform: translateZ(30px);
}

.complex-3d-button-container {
     perspective: 1000px;
}

.complex-3d-button {
     transform: translateZ(20px);
     transition: transform 0.3s ease-in-out;
}

.complex-3d-button:hover {
     transform: translateZ(30px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.complex-3d-upload {
    backface-visibility: hidden;
}
</style>