3D 디자인의 반응형 양식 구성 요소, 유사한 색 구성표, 어두운 테마를 지원하는 전자 상거래를 위한 간단한 레이아웃
<div class="container mx-auto p-4"> <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl p-6 transform hover:scale-105 transition duration-300"> <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Shipping Information</h2> <form> <div class="mb-4"> <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label> <input type="text" id="fullName" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="John Doe"> </div> <div class="mb-4"> <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label> <input type="text" id="address" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="123 Main St"> </div> <div class="mb-4"> <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label> <input type="text" id="city" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="Anytown"> </div> <div class="mb-4"> <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip Code</label> <input type="text" id="zip" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="12345"> </div> <div class="flex items-center justify-between"> <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform translate-z-0 perspective-origin dark:bg-blue-700 dark:hover:bg-blue-900"> Submit Order </button> </div> </form> </div> </div>
파스텔 색 구성표가 있는 레트로/빈티지 스타일로 디자인된 복잡한 양식 구성 요소로, 전문 비즈니스 웹 사이트에 적합하고 다크 모드 지원으로 반응합니다.
소셜 미디어를 위한 단순하고 잔인한 형태 구성 요소로, 삼극 색 구성표와 어두운 테마를 지원합니다.
복잡하고 반응이 빠르며 생생한 3D에서 영감을 받은 소셜 미디어 양식 구성 요소로, 어두운 테마를 지원합니다.