wip
This commit is contained in:
parent
7bb69a333e
commit
0389429002
|
@ -2,7 +2,7 @@
|
|||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1>
|
||||
|
||||
<inputs></inputs>
|
||||
<simple></simple>
|
||||
<newsletter></newsletter>
|
||||
<sign-in></sign-in>
|
||||
<sign-in-with-image></sign-in-with-image>
|
||||
|
@ -10,14 +10,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Inputs from "../ui/Forms/Inputs";
|
||||
import Simple from "../ui/Forms/Simple";
|
||||
import Newsletter from "../ui/Forms/Newsletter";
|
||||
import SignIn from "../ui/Forms/SignIn";
|
||||
import SignInWithImage from "../ui/Forms/SignInWithImage";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Inputs,
|
||||
Simple,
|
||||
Newsletter,
|
||||
SignIn,
|
||||
SignInWithImage
|
||||
|
|
|
@ -8,22 +8,22 @@
|
|||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
|
||||
<div>
|
||||
<label class="text-gray-700" for="username">Username</label>
|
||||
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="emailAddress">Email Address</label>
|
||||
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="password">Password</label>
|
||||
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
|
||||
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -40,7 +40,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Inputs',
|
||||
name: 'Simple',
|
||||
code: `
|
||||
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
|
||||
|
@ -49,22 +49,22 @@
|
|||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
|
||||
<div>
|
||||
<label class="text-gray-700" for="username">Username</label>
|
||||
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="emailAddress">Email Address</label>
|
||||
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="password">Password</label>
|
||||
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
|
||||
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in a new issue