I’m trying to integrate a Tailwind form into my React website but when I finish typing in the labels the text goes down on top of the other one. I have tried with different forms and with all of them the same thing happens. Now I’m using the ‘Login Form v.2’and I can’t see the borders that should appear on the labels. I have tried other forms and got the same error. I think I’m missing some style dependency but I don’t know which one it might be. Im new with Tailwind, thanks.
Example photo:
enter image description here
My photo:
enter image description here
My login.js:
import React, { useState } from 'react';
import AppLogin from '../components/account/AppLogin';
function Login() {
return (
<div>
<AppLogin
/>
</div>
);
}
export default Login;
My AppLogin.jsx:
import React, { useEffect } from 'react';
import {
Input,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Input, Ripple });
function AppLogin({}) {
return (
<section class="gradient-form h-full bg-neutral-200 dark:bg-neutral-700">
<div class="container h-full p-10">
<div
class="flex h-full flex-wrap items-center justify-center text-neutral-800 dark:text-neutral-200">
<div class="w-full">
<div
class="block rounded-lg bg-white shadow-lg dark:bg-neutral-800">
<div class="g-0 lg:flex lg:flex-wrap">
<div class="px-4 md:px-0 lg:w-6/12">
<div class="md:mx-6 md:p-12">
<div class="text-center">
<img
class="mx-auto w-48"
src="https://tecdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp"
alt="logo" />
<h4 class="mb-12 mt-1 pb-1 text-xl font-semibold">
We are The Lotus Team
</h4>
</div>
<form>
<p class="mb-4">Please login to your account</p>
<div class="relative mb-4" data-twe-input-wrapper-init>
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput1"
placeholder="Username" />
<label
for="exampleFormControlInput1"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Username
</label>
</div>
<div class="relative mb-4" data-twe-input-wrapper-init>
<input
type="password"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormControlInput11"
placeholder="Password" />
<label
for="exampleFormControlInput11"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Password
</label>
</div>
<div class="mb-12 pb-1 pt-1 text-center">
<button
class="mb-3 inline-block w-full rounded px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-dark-3 transition duration-150 ease-in-out hover:shadow-dark-2 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:shadow-dark-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
style={{
background: 'linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593)'
}}
>
Log in
</button>
<a href="#!">Forgot password?</a>
</div>
<div class="flex items-center justify-between pb-6">
<p class="mb-0 me-2">Don't have an account?</p>
<button
type="button"
class="inline-block rounded border-2 border-danger px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-danger transition duration-150 ease-in-out hover:border-danger-600 hover:bg-danger-50/50 hover:text-danger-600 focus:border-danger-600 focus:bg-danger-50/50 focus:text-danger-600 focus:outline-none focus:ring-0 active:border-danger-700 active:text-danger-700 dark:hover:bg-rose-950 dark:focus:bg-rose-950"
data-twe-ripple-init
data-twe-ripple-color="light">
Register
</button>
</div>
</form>
</div>
</div>
<div
class="flex items-center rounded-b-lg lg:w-6/12 lg:rounded-e-lg lg:rounded-bl-none"
style={{
background: 'linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593)'
}}
>
<div class="px-4 py-6 text-white md:mx-6 md:p-12">
<h4 class="mb-6 text-xl font-semibold">
We are more than just a company
</h4>
<p class="text-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
export default AppLogin;
Fix error in Tailwind label with React
1