Input with floating label make with tailwindcss 3.0.18

Overview

tailwind-floating-label-input

Input with floating label make with tailwindcss 3.0.18

Works with <input> and <textarea> elements.

image

How to use

<Input
    type="email"                      //textarea in case of textarea element.
    id="hero-email"   
    placeholder="[email protected]"  //required
>
    This is my label
</Input>

TODOs

Implement <select> component.

You might also like...

why make apps to increase focus -- when you can make apps to reduce focus

impossifocus 🕺 What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Nov 30, 2022

Notes may contain grammatical errors and some wont make sense and will only make sense to me

Notes may contain grammatical errors and some wont make sense and will only make sense to me

This is my own notes containing all the information and knowledge I've gained during my studying sessions. The notes are all topics that relates to technology such as computers, software or programming.

Dec 15, 2022

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Oct 5, 2022

A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed

A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed

tailwindcsscli A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed Installation To install the CLI, run the

Sep 30, 2022

Rede social baseada no ShareMe para compartilhamento e download de fotos em React,Sanity.io e TailWindCSS

Rede social baseada no ShareMe para compartilhamento e download de fotos em React,Sanity.io e TailWindCSS

Photophan 📄 Descrição phothopan é uma rede social para o compartilhamento e download de imagens,foi desenvolvida utilizando React(Frontend),Sanity(Ba

Jan 8, 2022

A TailwindCSS variant for class-based dark mode with CSS Modules.

A TailwindCSS variant for class-based dark mode with Svelte's scoped stylesheets and CSS modules. If you've ever tried to use TailwindCSS dark mode wi

Dec 1, 2022

Palette plugin using CSS variables for TailwindCSS

 Palette plugin using CSS variables for TailwindCSS

Palette plugin using CSS variables for TailwindCSS Adds a color palette (from 100 to 900) for each color of your tailwind configuration while using CS

Dec 28, 2022

Medium-Clone with Next.JS, Typescript, Tailwindcss, and Sanity!!

Medium-Clone with Next.JS, Typescript, Tailwindcss, and Sanity!!

Medium Clone 📌 Overview /pages ✔️ pages/index.tsx = Homepage and list all Blogs ✔️ pages/post/[slug].tsx = Details Blog /pages/api ✔️ pages/api/creat

Nov 16, 2022
Owner
Pablo David Gago Ballester
I am a computer science engineer, fronted developer and a css, html and javascript nerd.
Pablo David Gago Ballester
Label your form input like a boss with beautiful animation and without taking up space

#Label Better by Pete R. Label your form input like a boss with beautiful animation and without taking up space Created by Pete R., Founder of BucketL

Pete R. 520 Feb 5, 2022
Tampermonkey script which adds the ability to add a user-defined label/tag/flair on a user, shown throughout Hacker News.

Hacker News User Tags Hacker News User Tags is a Tampermonkey userscript which allows the user to associate a custom coloured label/tag on usernames t

Lachlan McDonald 2 Oct 7, 2022
Displaying actual age in percentage with 9 signs after dot (floating number)

Actual Age Chrome Extension Displaying actual age in percentage with 9 signs after dot (floating number) Features Popup You can select your Birth date

Igor Makeenko 22 Nov 2, 2022
Svelte✨ Floating UI 🎈

?? Svelte Floating UI Floating UI for Svelte with actions. No wrapper components or component bindings required! npm i -D svelte-floating-ui Usage cre

Nikita Fedorov 39 Dec 24, 2022
useOverlay uses floating-ui and framer-moting under the hood, giving you an API that provides great usability.

Create floating things easily useOverlay uses floating-ui and framer-moting under the hood, giving you an API that provides great usability. Warning D

Nedim Arabacı 8 Oct 24, 2022
Unread-Messages.js is a lightweight library that lets a user add floating number notifications to any object.

Unread-Messages.js About Unread-Messages.js is a lightweight library that lets a user add mobile-like notification counter badge to any object with ju

Mulaza Jacinto 2 Dec 18, 2021
Show floating sticky outline (table of contents) for Notion pages, powered by nbundle.

Notion Outline Show floating sticky outline (table of contents) for Notion pages, powered by nbundle. This is an nbundle-powered Notion app bootstrapp

nbundle 11 Nov 10, 2022
A Bootstrap plugin to create input spinner elements for number input

bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-

Stefan Haack 220 Nov 7, 2022
A phone input component that uses intl-tel-input for Laravel Filament

Filament Phone Input This package provides a phone input component for Laravel Filament. It uses International Telephone Input to provide a dropdown o

Yusuf Kaya 24 Nov 29, 2022
A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

yup-nope A library for boolean aliases to help you make your code more confusing and make your coworkers hate you. Installation Using npm: npm install

Bence A. Tóth 4 Dec 10, 2022