
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>