Patterns
Common patterns for building interfaces.
Container (max-w-screen-xl)
Code
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#FDAEB7;font-style:italic">Container</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bg-white"</span><span style="color:#E1E4E8">>content</</span><span style="color:#FDAEB7;font-style:italic">Container</span><span style="color:#E1E4E8">></span></span></code></pre>
Container FullWidth (max-w-full)
Code
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#FDAEB7;font-style:italic">Container</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bg-white"</span><span style="color:#B392F0"> isFullWidth</span><span style="color:#E1E4E8">>content</</span><span style="color:#FDAEB7;font-style:italic">Container</span><span style="color:#E1E4E8">></span></span></code></pre>
Code
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">Header</span><span style="color:#E1E4E8">></span></span>
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> slot</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"logo"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"flex-shrink-0 flex items-center h-8"</span><span style="color:#E1E4E8">></span></span>
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bg-gray"</span><span style="color:#E1E4E8">>LOGO</</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">input</span><span style="color:#B392F0"> type</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text"</span><span style="color:#B392F0"> slot</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"search"</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"h-full w-full sm:w-52 md:w-64 border border-solid px-3 text-sm"</span><span style="color:#B392F0"> placeholder</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Search..."</span><span style="color:#E1E4E8">/></span></span>
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">Header</span><span style="color:#E1E4E8">></span></span></code></pre>