Login-Formular mit Tailwind erstellen

Tailwind ist ein CSS-Framework. Weitere Infos unter https://tailwindcss.com.
In diesem Beitrag wird ein Login-Formular erstellt.

1. Schritt

Zunächst bauen wir den „Kasten“ für das Login-Formular.

Zutatenliste

.container: width: 100 %
.flex-1: flex: 1;
.mx-auto: zentriert die Klasse .container
.mt-5: margin-top: 1,25rem;

.flex: display: flex;
.justify-center: justify-content: center;

.w-full: width: 100 %
.max-w-xs: max-width: 20rem;
.bg-grey-darker: Grauer Hintergrund


<div class="container flex-1 mx-auto mt-5">
	
<div class="flex justify-center">
		
<div class="w-full max-w-xs bg-grey-darker">
			
<h2>Login</h2>

		</div>

	</div>

</div>

2. Schritt

Jetzt erstellen wir den Eingabebereich (form>

Zutatenliste

bg-white: background-color: white;
shadow-md: box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),
0 2px 4px 0 rgba(0,0,0,0.08);
rounded: border-radius: .25rem;


<div class="container flex-1 mx-auto mt-5">
    
<div class="flex justify-center">
        
<div class="w-full max-w-xs bg-grey-darker">
            
<h2>Login</h2>

            
<form method="POST" action="{{ route('login') }}" class="bg-white shadow-md rounded">
            </form>

        </div>

    </div>

</div>

3. Schritt

Jetzt bauen wir den Eingabebereich für die Mailadresse und das Kennwort

Zutatenliste

.block: display: block;
.shadow: box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
.appearance-none: appearance: none;

.items-center: align-items: center;
.justify-between: justify-content: space-between;


<div class="mb-4">
    <label for="email" class="block text-grey-darker text-sm font-bold mb-2">Mail</label>
    <input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" name="email">
</div>



<div class="mb-4">
    <label for="password" class="block text-grey-darker text-sm font-bold mb-2">Kennwort</label>
    <input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" name="password">
</div>



<div class="flex items-center justify-between mb-4">
    <button class="bg-green hover:bg-green-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
        Login
    </button>
</div>

4. Schritt

So sieht das Formular insgesamt aus:


<div class="container flex-1 mx-auto mt-5">
    
<div class="flex justify-center">
        
<div class="w-full max-w-xs bg-grey-darker">
            
<h2>Login</h2>

            
<form method="POST" action="{{ route('login') }}" class="bg-white shadow-md rounded">
                
<div class="mb-4">
                    <label for="email" class="block text-grey-darker text-sm font-bold mb-2">Mail</label>
                    <input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" name="email">
                </div>


                
<div class="mb-4">
                    <label for="password" class="block text-grey-darker text-sm font-bold mb-2">Kennwort</label>
                    <input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" name="password">
                </div>


                
<div class="flex items-center justify-between mb-4">
                    <button class="bg-green hover:bg-green-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                        Login
                    </button>
                </div>



            </form>

        </div>

    </div>

</div>

Versdigo