Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form class="card flex flex-col gap" autocomplete="off" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="0V9zpvFGrl4LGKUvGTSixd6TQ1kr6AWW-9Y4UZJ1zjMAHP0B1Hbmc2mx-QepLvkHeO8R7zZjkxMBw-Im_qP5tw" autocomplete="off" />
  <div class="flex items-start gap">
    <div class="flex flex-col flex-item-grow">
      <h3 class="font-medium leading-none mbe-1">Login to your account</h3>
      <p class="text-sm text-subtle">Enter your email below to login to your account</p>
    </div>
    <a class="btn btn--plain" href="#">Sign Up</a>
  </div>
  <div class="flex flex-col gap">
    <div class="flex flex-col gap-half">
      <label class="text-sm font-medium leading-none" for="email">Email</label>
      <input placeholder="m@example.com" required="required" class="input" type="email" name="email" id="email" />
    </div>
    <div class="flex flex-col gap-half">
      <div class="flex items-center">
        <label class="text-sm font-medium leading-none" for="password">Password</label>
        <a class="text-sm mis-auto" href="#">Forgot your password?</a>
      </div>
      <input required="required" class="input" type="password" name="password" id="password" />
    </div>
  </div>
  <div class="card__footer flex flex-col gap-half">
    <input type="submit" name="commit" value="Login" class="btn btn--primary" data-disable-with="Login" />
    <button type="button" class="btn">Login with Google</button>
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%= form_with url: nil, html: { autocomplete: "off" }, class: "card flex flex-col gap" do |form| %>
  <div class="flex items-start gap">
    <div class="flex flex-col flex-item-grow">
      <h3 class="font-medium leading-none mbe-1">Login to your account</h3>
      <p class="text-sm text-subtle">Enter your email below to login to your account</p>
    </div>
    <%= link_to "Sign Up", "#", class: "btn btn--plain" %>
  </div>
  <div class="flex flex-col gap">
    <div class="flex flex-col gap-half">
      <%= form.label :email, class: "text-sm font-medium leading-none" %>
      <%= form.email_field :email, placeholder: "m@example.com", required: true, class: "input" %>
    </div>
    <div class="flex flex-col gap-half">
      <div class="flex items-center">
        <%= form.label :password, class: "text-sm font-medium leading-none" %>
        <%= link_to "Forgot your password?", "#", class: "text-sm mis-auto" %>
      </div>
      <%= form.password_field :password, required: true, class: "input" %>
    </div>
  </div>
  <div class="card__footer flex flex-col gap-half">
    <%= form.submit "Login", class: "btn btn--primary" %>
    <button type="button" class="btn">Login with Google</button>
  </div>
<% end %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.card {
  --card-padding: var(--size-4);
  background-color: var(--color-surface);
  border-radius: var(--rounded-xl);
  border-width: var(--border);
  box-shadow: var(--shadow-sm);
  padding: var(--card-padding, var(--size-4));
}
.card__footer {
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-block-start-width: var(--border);
  margin-block-end: calc(var(--card-padding) * -1);
  margin-inline: calc(var(--card-padding) * -1);
  padding: var(--card-padding);
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.