Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="sticky top-0 bg-white shadow-sm">
  <div class="midwest-layout size-full padding-none type-default" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px">
    <div class="wrapper">
      <div class="flex items-center justify-between py-6 md:justify-start md:space-x-10">
        <div class="flex justify-start lg:w-0 lg:flex-1">
          <a href="#">
            <span class="sr-only">Unabridged Software</span>
            <img class="h-8 w-auto sm:h-10" alt="" src="https://tailwindui.com/img/logos/mark.svg?color=blue&shade=600">
          </a>
        </div>
        <div class="-my-2 -mr-2 md:hidden">
          <button class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-5 hover:bg-gray-1 hover:text-gray-6 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-theme-6" aria-expanded="false" type="button">
            <span class="sr-only">Open menu</span>
            <div class="midwest-icon text-2xl">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Menu"><title>Menu</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="48" d="M88 152h336M88 256h336M88 360h336"></path></svg>
              </div>
            </div>
          </button>
        </div>
        <nav class="hidden space-x-10 md:flex">
          <div class="relative">
            <button class="text-gray-6 group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-12 focus:outline-none focus:ring-2 focus:ring-theme-6 focus:ring-offset-2" aria-expanded="false" type="button">
              <span>Solutions</span>
              <div class="midwest-icon text-gray-3 group-hover:text-gray-4 ml-2">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title>
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
                </div>
              </div>
            </button>
          </div>
          <a class="text-base font-medium text-gray-6 hover:text-gray-12" href="#">Pricing</a>
          <a class="text-base font-medium text-gray-6 hover:text-gray-12" href="#">Docs</a>
          <div class="relative">
            <button class="text-gray-6 group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-12 focus:outline-none focus:ring-2 focus:ring-theme-6 focus:ring-offset-2" aria-expanded="false" type="button">
              <span>More</span>
              <div class="midwest-icon text-gray-3 group-hover:text-gray-4 ml-2">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title>
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
                </div>
              </div>
            </button>
          </div>
        </nav>
        <div class="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
          <a class="whitespace-nowrap text-base font-medium text-gray-6 hover:text-gray-12" href="#">Sign in</a>
          <a class="ml-8 inline-flex items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-theme-6 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-theme-8" href="#">Sign up</a>
        </div>
      </div>
    </div>
  </div>
  <div class="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden">
    <div class="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
      <div class="px-5 pt-5 pb-6">
        <div class="flex items-center justify-between">
          <div>
            <img class="h-8 w-auto" alt="Unabridged Software" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600">
          </div>
          <div class="-mr-2">
            <button class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-5 hover:bg-gray-1 hover:text-gray-6 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-theme-6" type="button">
              <span class="sr-only">Close menu</span>
              <div class="midwest-icon h-6 w-6">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Close"><title>Close</title>
                    <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg>
                </div>
              </div>
            </button>
          </div>
        </div>
        <div class="mt-6">
          <nav class="grid gap-y-8">
            <a class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50" href="#">
              <div class="midwest-icon h-6 w-6 flex-shrink-0 text-theme-6">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Pie chart"><title>Pie chart</title>
                    <path d="M66.1 357a16 16 0 01-14.61-9.46A224 224 0 01256 32a16 16 0 0116 16v208a16 16 0 01-9.47 14.61l-189.9 84.95A15.93 15.93 0 0166.1 357z"></path><path d="M313.59 68.18A8 8 0 00304 76v180a48.07 48.07 0 01-28.4 43.82L103.13 377a8 8 0 00-3.35 11.81 208.42 208.42 0 0048.46 50.41A206.32 206.32 0 00272 480c114.69 0 208-93.31 208-208 0-100.45-71.58-184.5-166.41-203.82z"></path></svg>
                </div>
              </div>
              <span class="ml-3 text-base font-medium text-gray-12">Analytics</span>
            </a>
          </nav>
        </div>
      </div>
      <div class="space-y-6 py-6 px-5">
        <div class="grid grid-cols-2 gap-y-4 gap-x-8">
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Pricing</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Docs</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Help Center</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Guides</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Events</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Security</a>
        </div>
        <div>
          <a class="flex w-full items-center justify-center rounded-md border border-transparent bg-theme-7 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-theme-8" href="#">Sign up</a>
          <p class="mt-6 text-center text-base font-medium text-gray-6">
            Existing customer?
            <a class="text-theme-7 hover:text-theme-6" href="#">Sign in</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<div class="sticky top-0 bg-white shadow-sm">
  <%= midwest_layout(padding: :none, size: :full) do %>
    <div class="flex items-center justify-between py-6 md:justify-start md:space-x-10">
      <div class="flex justify-start lg:w-0 lg:flex-1">
        <a href="#">
          <span class="sr-only">Unabridged Software</span>
          <img class="h-8 w-auto sm:h-10" alt="" src="https://tailwindui.com/img/logos/mark.svg?color=blue&shade=600">
        </a>
      </div>
      <div class="-my-2 -mr-2 md:hidden">
        <button class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-5 hover:bg-gray-1 hover:text-gray-6 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-theme-6" aria-expanded="false" type="button">
          <span class="sr-only">Open menu</span>
          <%= midwest_icon(:'menu', class: "text-2xl") %>
        </button>
      </div>
      <nav class="hidden space-x-10 md:flex">
        <div class="relative">
          <button class="text-gray-6 group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-12 focus:outline-none focus:ring-2 focus:ring-theme-6 focus:ring-offset-2" aria-expanded="false" type="button">
            <span>Solutions</span>
            <%= midwest_icon(:'chevron-down', class: "text-gray-3 group-hover:text-gray-4 ml-2") %>
          </button>
        </div>
        <a class="text-base font-medium text-gray-6 hover:text-gray-12" href="#">Pricing</a>
        <a class="text-base font-medium text-gray-6 hover:text-gray-12" href="#">Docs</a>
        <div class="relative">
          <button class="text-gray-6 group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-12 focus:outline-none focus:ring-2 focus:ring-theme-6 focus:ring-offset-2" aria-expanded="false" type="button">
            <span>More</span>
            <%= midwest_icon(:'chevron-down', class: "text-gray-3 group-hover:text-gray-4 ml-2") %>
          </button>
        </div>
      </nav>
      <div class="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
        <a class="whitespace-nowrap text-base font-medium text-gray-6 hover:text-gray-12" href="#">Sign in</a>
        <a class="ml-8 inline-flex items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-theme-6 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-theme-8" href="#">Sign up</a>
      </div>
    </div>
  <% end %>
  <div class="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden">
    <div class="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
      <div class="px-5 pt-5 pb-6">
        <div class="flex items-center justify-between">
          <div>
            <img class="h-8 w-auto" alt="Unabridged Software" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600">
          </div>
          <div class="-mr-2">
            <button class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-5 hover:bg-gray-1 hover:text-gray-6 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-theme-6" type="button">
              <span class="sr-only">Close menu</span>
              <%= midwest_icon(:'close', class: "h-6 w-6") %>
            </button>
          </div>
        </div>
        <div class="mt-6">
          <nav class="grid gap-y-8">
            <a class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50" href="#">
              <%= midwest_icon(:'pie-chart', class: "h-6 w-6 flex-shrink-0 text-theme-6") %>
              <span class="ml-3 text-base font-medium text-gray-12">Analytics</span>
            </a>
          </nav>
        </div>
      </div>
      <div class="space-y-6 py-6 px-5">
        <div class="grid grid-cols-2 gap-y-4 gap-x-8">
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Pricing</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Docs</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Help Center</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Guides</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Events</a>
          <a class="text-base font-medium text-gray-12 hover:text-gray-8" href="#">Security</a>
        </div>
        <div>
          <a class="flex w-full items-center justify-center rounded-md border border-transparent bg-theme-7 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-theme-8" href="#">Sign up</a>
          <p class="mt-6 text-center text-base font-medium text-gray-6">
            Existing customer?
            <a class="text-theme-7 hover:text-theme-6" href="#">Sign in</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Default

This is the minimum code needed to make a header.

Taken from https://tailwindui.com/components/marketing/elements/headers

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility