railsui 3.1.5 → 3.2.0

data/app/views/railsui/themes/corgie/components/toast/_base.html.erb

@@ -0,0 +1,98 @@
+<div id="toast-simple">
+<%= render layout: example, locals: { heading: "Simple", section: "Toast" } do %>
+
+<div class="relative bg-neutral-100 border-neutral-200 border rounded-lg p-10 w-full min-h-[280px] dark:bg-neutral-900 dark:border-neutral-700 overflow-hidden">
+  <div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full animate-toast-from-right" data-controller="toast">
+    <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10 dark:bg-neutral-950 dark:border dark:border-neutral-700/80">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="shrink-0">
+            <%= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400" %>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <p class="text-sm font-medium text-neutral-900 dark:text-white">Successfully liked!</p>
+            <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-300">John Doe has been notified.</p>
+          </div>
+          <div class="ml-4 flex shrink-0">
+            <button type="button" class="inline-flex rounded-sm bg-white text-neutral-400 hover:text-neutral-500 focus:outline-hidden focus:ring-2 focus:ring-neutral-50 dark:bg-transparent dark:focus:ring-neutral-500 dark:hover:text-neutral-100
+            dark:focus:text-neutral-100" data-action="click->toast#hide">
+              <span class="sr-only">Close</span>
+              <%= icon "x-mark", class: "size-5 pointer-events-none" %>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true  do %>
+<div class="relative overflow-hidden">
+  <div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full animate-toast-from-right" data-controller="railsui-toast">
+    <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10  dark:bg-neutral-950 dark:border dark:border-neutral-700/80">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="shrink-0">
+            <%%= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400" %>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <p class="text-sm font-medium text-neutral-900 dark:text-white">Successfully liked!</p>
+            <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-300">John Doe has been notified.</p>
+          </div>
+          <div class="ml-4 flex shrink-0">
+            <button type="button" class="inline-flex rounded-sm bg-white text-neutral-400 hover:text-neutral-500 focus:outline-hidden focus:ring-2 focus:ring-neutral-50 dark:bg-transparent dark:focus:ring-neutral-500 dark:hover:text-neutral-100
+            dark:focus:text-neutral-100" data-action="click->railsui-toast#hide">
+              <span class="sr-only">Close</span>
+              <%%= icon "x-mark", class: "size-5" %>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="relative overflow-hidden">
+  <div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full animate-toast-from-right" data-controller="railsui-toast">
+    <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10  dark:bg-neutral-950 dark:border dark:border-neutral-700/80">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="shrink-0">
+            <%%= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400" %>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <p class="text-sm font-medium text-neutral-900 dark:text-white">Successfully liked!</p>
+            <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-300">John Doe has been notified.</p>
+          </div>
+          <div class="ml-4 flex shrink-0">
+            <button type="button" class="inline-flex rounded-sm bg-white text-neutral-400 hover:text-neutral-500 focus:outline-hidden focus:ring-2 focus:ring-neutral-50 dark:bg-transparent dark:focus:ring-neutral-500 dark:hover:text-neutral-100
+            dark:focus:text-neutral-100" data-action="click->railsui-toast#hide">
+              <span class="sr-only">Close</span>
+              <%%= icon "x-mark", class: "size-5" %>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :css, flush: true do %>
+
+<% end %>
+
+<% content_for :js, flush: true do %>
+import { RailsuiToast } from 'railsui-stimulus'
+application.register('railsui-toast', RailsuiToast)
+<% end %>
+
+<%= render_snippet js_filename: "index.js" %>
+
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/tooltip/_base.html.erb

@@ -0,0 +1,51 @@
+<div id="tooltip-base">
+<%= render layout: example, locals: { heading: "Base", section: "Tooltip" } do %>
+
+<%= render preview('neutral') do %>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="Hi, from the tips of tools" class="btn btn-primary">Hover here</button>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="We raised over $1 billion to engineer the greatest tooltip of our lives. <strong>What's super cool</strong> is that HTML can be embedded into the tooltip for max emphasis." data-railsui-tooltip-allow-html-value="true" class="btn btn-white">and here</button>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true  do %>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!" data-railsui-tooltip-allow-html-value="true" class="btn btn-primary">Tooltip with HTML demo</button>
+<% end %>
+
+<% content_for :erb, flush: true  do %>
+<%%= button_tag "#", class: "btn btn-primary", data: { controller: "railsui-tooltip", railsui_tooltip_content_value: "This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!", railsui_tooltip_allow_html_value: "true" } %>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+// https://github.com/getrailsui/railsui-stimulus/blob/main/src/railsui_tooltip.js
+
+import { Controller } from '@hotwired/stimulus'
+import tippy from 'tippy.js'
+
+export default class extends Controller {
+  static values = {
+    content: String,
+    allowHtml: { type: Boolean, default: false },
+  }
+
+  connect() {
+    let options = {}
+    if (this.hasContentValue) {
+      options['content'] = this.contentValue
+    }
+    if (this.hasAllowHtmlValue) {
+      options['allowHTML'] = this.allowHtmlValue
+    }
+    this.tippy = tippy(this.element, options)
+  }
+
+  disconnect() {
+    this.tippy.destroy()
+  }
+}
+<% end %>
+
+<%= render_snippet js_filename: "tooltip_controller.js" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/_image.html.erb

@@ -0,0 +1,31 @@
+<% path = "railsui/themes/#{Railsui.config.theme}/content/image" %>
+
+<%= render "#{path}/responsive" %>
+
+<%= divider %>
+
+<%= render "#{path}/object_cover" %>
+
+<%= divider %>
+
+<%= render "#{path}/object_contain" %>
+
+<%= divider %>
+
+<%= render "#{path}/object_fill" %>
+
+<%= divider %>
+
+<%= render "#{path}/object_scale_down" %>
+
+<%= system_pagination(prev_path: systems_icons_path, prev_text: "Icons", next_path: systems_scaffolds_path, next_text: "Scaffold") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Responsive", "#image-responsive" %>
+		<%= component_link "Object Cover", "#image-object-cover" %>
+    <%= component_link "Object Contain", "#image-object-contain" %>
+    <%= component_link "Object Fill", "#image-object-fill" %>
+    <%= component_link "Object Scale Down", "#image-object-scale-down" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/content/_table.html.erb

@@ -0,0 +1,21 @@
+<% path = "railsui/themes/#{Railsui.config.theme}/content/table" %>
+
+<%= render "#{path}/bordered" %>
+
+<%= divider %>
+
+<%= render "#{path}/borderless" %>
+
+<%= divider %>
+
+<%= render "#{path}/comparison" %>
+
+<%= system_pagination(prev_path: systems_content_typography_path, prev_text: "Typography", next_path: systems_icons_path, next_text: "Icons") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Border", "#table-border" %>
+		<%= component_link "Borderless", "#table-borderless" %>
+		<%= component_link "Comparison", "#table-comparison" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/content/_typography.html.erb

@@ -0,0 +1,47 @@
+<% path = "railsui/themes/#{Railsui.config.theme}/content/typography" %>
+
+
+<%= render "#{path}/fonts" %>
+
+<%= divider %>
+
+<%= render "#{path}/headings" %>
+
+<%= divider %>
+
+<%= render "#{path}/display_headings" %>
+
+<%= divider %>
+
+<%= render "#{path}/blockquote" %>
+
+<%= divider %>
+
+<%= render "#{path}/lists" %>
+
+<%= divider %>
+
+<%= render "#{path}/lead_paragraph" %>
+
+<%= divider %>
+
+<%= render "#{path}/paragraphs" %>
+
+<%= divider %>
+
+<%= render "#{path}/inline_formatting" %>
+
+<%= system_pagination(prev_path: systems_content_path, prev_text: "Content", next_path: systems_content_table_path, next_text: "Table") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Fonts", "#typography-fonts" %>
+    <%= component_link "Headings", "#typography-headings" %>
+    <%= component_link "Display Headings", "#typography-display-headings" %>
+    <%= component_link "Blockquote", "#typography-blockquote" %>
+    <%= component_link "Lists", "#typography-lists" %>
+    <%= component_link "Lead paragraph", "#typography-lead-paragraph" %>
+    <%= component_link "Paragraphs", "#typography-paragraphs" %>
+    <%= component_link "Inline formatting", "#typography-inline-formatting" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/content/image/_object_contain.html.erb

@@ -0,0 +1,31 @@
+<div id="image-object-contain">
+<%= render layout: example, locals: { heading: "Object Contain" } do %>
+  <div class="prose prose-neutral dark:prose-invert mb-6">
+    <p>Resize an element’s content to stay contained within its container using <code>.object-contain</code>.</p>
+  </div>
+
+  <%= render preview('neutral') do %>
+    <div class="flex items-center justify-center font-tiktok">
+      <img src="https://picsum.photos/900/700" alt="" class="object-contain h-48 w-96 rounded-lg shadow-xl bg-blue-100">
+    </div>
+  <% end %>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="bg-neutral-50...">
+  <img src="#" class="object-contain h-48 w-96">
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="bg-neutral-50...">
+  <%%= image_tag "#", class: "object-contain h-48 w-96" %>
+</div>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/image/_object_cover.html.erb

@@ -0,0 +1,32 @@
+<div id="image-object-cover">
+<%= render layout: example, locals: { heading: "Object Cover" } do %>
+
+<div class="prose prose-neutral dark:prose-invert mb-6 max-w-full">
+  <p>Resize an element's content to cover it's container using <code>.object-cover</code>.</p>
+</div>
+
+  <%= render preview('neutral') do %>
+    <div class="flex items-center justify-center font-tiktok">
+      <img src="https://picsum.photos/900/700" alt="" class="object-cover h-48 w-96 rounded-lg shadow-xl">
+    </div>
+  <% end %>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="bg-neutral-50...">
+  <img src="#" class="object-cover h-48 w-96">
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="bg-neutral-50...">
+  <%%= image_tag "#", class: "object-cover h-48 w-96" %>
+</div>
+<% end %>
+<%= render_snippet %>
+
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/image/_object_fill.html.erb

@@ -0,0 +1,32 @@
+<div id="image-object-fill">
+<%= render layout: example, locals: { heading: "Object Fill" } do %>
+
+<div class="prose prose-netural dark:prose-invert mb-6 max-w-full">
+  <p>Stretch an element's content to fit its container <code>.object-fill</code>.</p>
+</div>
+
+<%= render preview('neutral') do %>
+  <div class="flex items-center justify-center font-tiktok">
+    <img src="https://picsum.photos/900/700" alt="" class="object-fill h-48 w-96 rounded-lg shadow-xl bg-blue-100">
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="bg-neutral-50...">
+  <img src="#" class="object-fill h-48 w-96">
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="bg-neutral-500...">
+  <%%= image_tag "#", class: "object-fill h-48 w-96" %>
+</div>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/image/_object_scale_down.html.erb

@@ -0,0 +1,34 @@
+<div id="image-object-scale-down">
+<%= render layout: example, locals: { heading: "Object Scale Down" } do %>
+
+<div class="prose prose-neutral dark:prose-invert mb-6 max-w-full">
+  <p>Display an element’s content at its original size but scale it down to fit its container if necessary using <code>.object-scale-down</code>.</p>
+</div>
+
+
+<%= render preview('neutral') do %>
+  <div class="flex items-center justify-center font-tiktok">
+    <img src="https://picsum.photos/900/700" alt="" class="object-scale-down h-48 w-96 rounded-xl shadow-xl bg-blue-100">
+  </div>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="bg-neutral-50...">
+  <img src="#" class="object-scale-down h-48 w-96">
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="bg-neutral-50...">
+  <%%= image_tag "#", class: "object-scale-down h-48 w-96" %>
+</div>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/image/_responsive.html.erb

@@ -0,0 +1,24 @@
+<div id="image-responsive">
+<%= render layout: example, locals: { heading: "Responsive" } do %>
+
+<div class="prose prose-neutral dark:prose-invert mb-6">
+  <p>Display images that scale proportionally relative to browser widths.</p>
+</div>
+
+<img src="https://picsum.photos/1600/900" class="max-w-full h-auto">
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+  <img src="#" class="max-w-full h-auto">
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+  <%%= image_tag "...", class: "max-w-full", alt:"..." %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/table/_bordered.html.erb

@@ -0,0 +1,93 @@
+<div id="table-border">
+<%= render layout: example, locals: { heading: "Border" } do %>
+
+	<table class="table-auto w-full border border-neutral-300 dark:border-neutral-700/80 font-tiktok">
+		<thead>
+			<tr>
+				<th scope="col" class="text-left p-3 border border-neutral-200 dark:border-neutral-700/80">First</th>
+				<th scope="col" class="text-left p-3 border border-neutral-200 dark:border-neutral-700/80">Last</th>
+				<th scope="col" class="text-left p-3 border border-neutral-200 dark:border-neutral-700/80">Handle</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td class="p-3 border border-neutral-200 dark:border-neutral-700/80">Andy</td>
+				<td class="p-3 border border-neutral-200 dark:border-neutral-700/80">L.</td>
+				<td class="p-3 border border-neutral-200 dark:border-neutral-700/80">@railsui_</td>
+			</tr>
+			<tr>
+				<td class="p-3 border border-neutral-200 dark:border-neutral-700/80">Web</td>
+				<td class="p-3 border border-neutral-200 dark:border-neutral-700/80">Crunch</td>
+				<td class="p-3 border border-neutral-200 dark:border-neutral-700/80">@webcrunchblog</td>
+			</tr>
+			<tr>
+				<td colspan="2" class="p-3 border border-neutral-200 dark:border-neutral-700/80">justalever</td>
+				<td class="p-3 border border-neutral-200 dark:border-neutral-700/80">@justalever</td>
+			</tr>
+		</tbody>
+	</table>
+
+
+<% content_for :example, flush: true do %>
+	<%# .html %>
+<% content_for :html, flush: true do %>
+<table class="table-auto w-full border border-neutral-300 dark:border-neutral-700/80">
+  <thead>
+	  <tr>
+		  <th scope="col" class="text-left p-3 border border-neutral-200 dark:border-neutral-700/80">First</th>
+		  <th scope="col" class="text-left p-3 border border-neutral-200 dark:border-neutral-700/80">Last</th>
+		  <th scope="col" class="text-left p-3 border border-neutral-200 dark:border-neutral-700/80">Handle</th>
+	  </tr>
+  </thead>
+  <tbody>
+	  <tr>
+		  <td class="p-3 border border-neutral-200 dark:border-neutral-700/80">Andy</td>
+		  <td class="p-3 border border-neutral-200 dark:border-neutral-700/80">L.</td>
+		  <td class="p-3 border border-neutral-200 dark:border-neutral-700/80">@railsui_</td>
+	  </tr>
+	  <tr>
+		  <td class="p-3 border border-neutral-200 dark:border-neutral-700/80">Web</td>
+		  <td class="p-3 border border-neutral-200 dark:border-neutral-700/80">Crunch</td>
+		  <td class="p-3 border border-neutral-200 dark:border-neutral-700/80">@webcrunchblog</td>
+	  </tr>
+	  <tr>
+		  <td colspan="2" class="p-3 border border-neutral-200 dark:border-neutral-700/80">justalever</td>
+		  <td class="p-3 border border-neutral-200 dark:border-neutral-700/80">@justalever</td>
+	  </tr>
+  </tbody>
+</table>
+<% end %>
+
+	<%# .erb %>
+<% content_for :erb, flush: true do %>
+<%%= tag.table class: "table-auto w-full border border-neutral-300 dark:border-neutral-700/80" do %>
+	<%%= tag.thead do %>
+		<%%= tag.tr do %>
+			<%%= tag.th "First", scope: "col", class: "text-left p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.th "Last", scope: "col", class: "text-left p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.th "Handle", scope: "col", class: "text-left p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+		<%% end %>
+	<%% end %>
+	<%%= tag.tbody do %>
+		<%%= tag.tr do %>
+			<%%= tag.td "Andy", class: "p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.td "L.", class: "p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.td "@railsui_", class: "p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+		<%% end %>
+		<%%= tag.tr do %>
+			<%%= tag.td "Web", class: "p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.td "Crunch", class: "p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.td "@webcrunchblog", class: "p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+		<%% end %>
+		<%%= tag.tr do %>
+			<%%= tag.td "justalever", colspan: "2", class: "p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.td "@justalever", class: "p-3 border border-neutral-200 dark:border-neutral-700/80" %>
+		<%% end %>
+	<%% end %>
+<%% end %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/content/table/_borderless.html.erb

@@ -0,0 +1,92 @@
+<div id="table-borderless">
+<%= render layout: example, locals: { heading: "Borderless" } do %>
+
+<table class="table-auto w-full font-tiktok">
+	<thead>
+		<tr>
+			<th scope="col" class="p-3 text-left border-b-2 border-neutral-200 dark:border-neutral-700/80">First</th>
+			<th scope="col" class="p-3 text-left border-b-2 border-neutral-200 dark:border-neutral-700/80">Last</th>
+			<th scope="col" class="p-3 text-left border-b-2 border-neutral-200 dark:border-neutral-700/80">Handle</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td class="p-3 text-left">Andy</td>
+			<td class="p-3 text-left">L.</td>
+			<td class="p-3 text-left">@railsui_</td>
+		</tr>
+		<tr>
+			<td class="p-3 text-left">Web</td>
+			<td class="p-3 text-left">Crunch</td>
+			<td class="p-3 text-left">@webcrunchblog</td>
+		</tr>
+		<tr>
+			<td class="p-3 text-left" colspan="2">justalever</td>
+			<td class="p-3 text-left">@justalever</td>
+		</tr>
+	</tbody>
+</table>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<table class="table-auto w-full">
+	<thead>
+		<tr>
+			<th class="text-left p-3 border-b-2 border-neutral-200 dark:border-neutral-700/80" scope="col">First</th>
+			<th class="text-left p-3 border-b-2 border-neutral-200 dark:border-neutral-700/80" scope="col">Last</th>
+			<th class="text-left p-3 border-b-2 border-neutral-200 dark:border-neutral-700/80" scope="col">Handle</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td class="p-3 text-left">Andy</td>
+			<td class="p-3 text-left">L.</td>
+			<td class="p-3 text-left">@railsui_</td>
+		</tr>
+		<tr>
+			<td class="p-3 text-left">Web</td>
+			<td class="p-3 text-left">Crunch</td>
+			<td class="p-3 text-left">@webcrunchblog</td>
+		</tr>
+		<tr>
+			<td class="p-3 text-left" colspan="2">justalever</td>
+			<td class="p-3 text-left">@justalever</td>
+		</tr>
+	</tbody>
+</table>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<%%= tag.table class: "table-auto w-full" do %>
+	<%%= tag.thead do %>
+		<%%= tag.tr do %>
+			<%%= tag.th "First", scope: "col", class: "text-left p-3 border-b-2 border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.th "Last", scope: "col", class: "text-left p-3 border-b-2 border-neutral-200 dark:border-neutral-700/80" %>
+			<%%= tag.th "Handle", scope: "col", class: "text-left p-3 border-b-2 border-neutral-200 dark:border-neutral-700/80" %>
+		<%% end %>
+	<%% end %>
+	<%%= tag.tbody do %>
+		<%%= tag.tr do %>
+			<%%= tag.td "Andy", class: "p-3 text-left" %>
+			<%%= tag.td "L.", class: "p-3 text-left" %>
+			<%%= tag.td "@railsui_", class: "p-3 text-left" %>
+		<%% end %>
+		<%%= tag.tr do %>
+			<%%= tag.td "Web", class: "p-3 text-left" %>
+			<%%= tag.td "Crunch", class: "p-3 text-left" %>
+			<%%= tag.td "@webcrunchblog", class: "p-3 text-left" %>
+		<%% end %>
+		<%%= tag.tr do %>
+			<%%= tag.td "justalever", colspan: "2", class: "p-3 text-left" %>
+			<%%= tag.td "@justalever", class: "p-3 text-left" %>
+		<%% end %>
+	<%% end %>
+<%% end %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>