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="Yzpjq87V_0hRCMM1QhJsAUz1ucXUeAPAtvJzzzLGu1KB98xw7xtAei3nkEVQLsTfV38fx0IA-rMtnNILd6BiEA" 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.