Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form class="card flex flex-col gap" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="1gdLD_8Dol23DydRUPp2m3s4UGkOeJH0BDWQ80LpUZsHHgQFcOvEbPQocOeMgDRZgwaQ5QHUe593kuu8ZErzqg" autocomplete="off" />
  <div class="flex flex-col gap-half">
    <h1 class="text-2xl font-semibold leading-none">Create project</h1>
    <p class="text-sm text-subtle">Deploy your new project in one-click.</p>
  </div>
  <div class="flex flex-col gap mb-2">
    <div class="flex flex-col gap-half">
      <label class="text-sm font-medium leading-none" for="name">Name</label>
      <input placeholder="Name of your project" class="input" type="text" name="name" id="name" />
    </div>
    <div class="flex flex-col gap-half">
      <label class="text-sm font-medium leading-none" for="framework">Framework</label>
      <select class="input" name="framework" id="framework"><option value="ruby">Ruby on Rails</option>
        <option value="laravel">Laravel</option>
        <option value="next">Next</option></select>
    </div>
  </div>
  <div class="flex items-center justify-between">
    <button class="btn">Cancel</button>
    <input type="submit" name="commit" value="Destroy" class="btn btn--primary" data-disable-with="Destroy" />
  </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
<%= form_with url: nil, class: "card flex flex-col gap" do |form| %>
  <div class="flex flex-col gap-half">
    <h1 class="text-2xl font-semibold leading-none">Create project</h1>
    <p class="text-sm text-subtle">Deploy your new project in one-click.</p>
  </div>
  <div class="flex flex-col gap mb-2">
    <div class="flex flex-col gap-half">
      <%= form.label :name, class: "text-sm font-medium leading-none" %>
      <%= form.text_field :name, placeholder: "Name of your project", class: "input" %>
    </div>
    <div class="flex flex-col gap-half">
      <%= form.label :framework, class: "text-sm font-medium leading-none" %>
      <%= form.select :framework, [["Ruby on Rails", "ruby"], ["Laravel", "laravel"], ["Next", "next"]], {}, class: "input" %>
    </div>
  </div>
  <div class="flex items-center justify-between">
    <button class="btn">Cancel</button>
    <%= form.submit "Destroy", class: "btn btn--primary" %>
  </div>
<% end %>
1
2
3
4
5
6
.card {
  border-radius: var(--rounded-lg);
  border-width: var(--border);
  padding: var(--size-6);
  box-shadow: var(--shadow-sm);
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.