Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
<div class="flex flex-col items-center text-center" style="max-inline-size: 450px;">
  <div class="flex flex-col items-center gap mbe-10">
    <h1 class="text-3xl font-bold leading-none">Welcome to the Contacts App</h1>
    <p class="text-subtle">It's time to expand our contacts.<br>
      Kickstart your contacts growth by adding your next contact.</p>
    <p><a class="btn btn--primary" href="">Add New Contact</a></p>
  </div>
  <img src="/assets/add_friends-2afa4d4d.svg" />
</div>
1
2
3
4
5
6
7
8
9
<div class="flex flex-col items-center text-center" style="max-inline-size: 450px;">
  <div class="flex flex-col items-center gap mbe-10">
    <h1 class="text-3xl font-bold leading-none">Welcome to the Contacts App</h1>
    <p class="text-subtle">It's time to expand our contacts.<br>Kickstart your contacts growth by adding your next contact.</p>
    <p><%= link_to "Add New Contact", "", class: "btn btn--primary" %></p>
  </div>
  <%= image_tag "add_friends.svg" %>
</div>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.

Dependencies