Add OTP Input component

[sulimanbenhalim]

New pure CSS OTP/PIN input component following daisyUI guidelines. No JavaScript required.

[pdanpdan]

You can get away with less CSS if you design it as a modifier for input.

https://play.tailwindcss.com/zrB3E7tjAq?file=css

I left the outline on focus when it is in wrapper (label) but it can be removed and the same increased border size can be used for focus indication.

[saadeghi]

I did some experiments on this a few months ago but I couldn't get the letter-spacing to work as expected. This looks promising 👍 Well done.

[sulimanbenhalim]

I did some experiments on this a few months ago but I couldn't get the letter-spacing to work as expected. This looks promising 👍 Well done.

still needs some work, it has issue on fully rounded themes like valentine worth looking into @pdanpdan solution

[pdanpdan]

I managed to get rounded boxes for each char.
I would say that now the only problem is that we cannot use transparent colors for the border and the bg of the boxes (so focus/active state should be indicated using bg color or something else), but appart for this it obeys everything in the theme.

v1: https://play.tailwindcss.com/FMTa8yKr3I?file=css
v2: https://play.tailwindcss.com/k0fWKxXvmB (added Valentine theme for testing, no other changes)
v3: https://play.tailwindcss.com/nxMhHDRqcE?file=css (improved aspect on text selection)

A variant with gap 0 should be separately defined, because it can be done with only one filled bg and repeated vertical lines, while using the input border and border radius for the external border.