Home
Md. Tofayel islam
floting input

floting input

This tailwind example is contributed by Md. Tofayel islam, on 20-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Input

Author Md. Tofayel islam

2.6k

Fork Fullscreen

<form class="max-w-xs mx-auto">
    <div class="relative">
        <span class="absolute start-0 bottom-3 text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
                <path d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z"/>
            </svg>
        </span>
        <input type="text" id="floating-phone-number" class="block py-2.5 ps-6 pe-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder=" " />
        <label for="floating-phone-number" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-placeholder-shown:start-6 peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Phone number</label>
    </div>
</form>

Related Examples

Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

7 months ago

1.1k
Drag and drop image upload with image preview

Author:
Santos78

2 years ago

22.3k
Login Form
Login Form

Author:
Md. Tofayel islam

1 year ago

1.7k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

8.5k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

5 months ago

534
test2

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.6k
File upload with icon

Author:
Fagundo67

2 years ago

17.3k
Login Form with Icon

Author:
Prashant

3 years ago

17.2k
Default phone input

Author:
Md. Tofayel islam

1 year ago

2.7k
File upload form

Author:
Lukas Müller

2 years ago

13.2k
File upload input section with file preview

Author:
Noob

3 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components