Tailwind UI Blocks Application UI

https://tailwindcss.com/plus/ui-blocks/application-ui
Admin
A collection of responsive Tailwind CSS–based UI components and templates for building web...
Tokens:109,312
Snippets:365
Trust Score:9.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Simple Sign-in Form

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/sign-in-forms

A basic sign-in form with email and password fields, and a 'Forgot password?' link. Includes options for signing in or starting a free trial.

```html
<div>
  <h2>Sign in to your account</h2>
  <form>
    <div>
      <label for="email">Email address</label>
      <input id="email" name="email" type="email" autocomplete="email" required>
    </div>
    <div>
      <label for="password">Password</label>
      <input id="password" name="password" type="password" autocomplete="current-password" required>
    </div>
    <div>
      <a href="#">Forgot password?</a>
    </div>
    <div>
      <button type="submit">Sign in</button>
    </div>
  </form>
  <p>Not a member? <a href="#">Start a 14 day free trial</a></p>
</div>
```

--------------------------------

### Simple Combobox

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/comboboxes

A basic combobox component for simple selection tasks. No specific setup required beyond Tailwind CSS.

```html
<label for="Underdog" class="sr-only">Assigned to</label>
<select id="Underdog" name="assigned_to" class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
  <option>Leslie Alexander</option>
  <option>Michael Foster</option>
  <option>Dries Vincent</option>
  <option>Lindsay Walton</option>
  <option>Courtney Henry</option>
  <option>Tom Cook</option>
  <option>Whitney Francis</option>
  <option>Leonard Krasner</option>
  <option>Floyd Miles</option>
  <option>Emily Selman</option>
  <option>Kristin Watson</option>
  <option>Emma Dorsey</option>
  <option>Alicia Bell</option>
  <option>Jenny Wilson</option>
  <option>Anna Roberts</option>
  <option>Benjamin Russel</option>
  <option>Jeffrey Webb</option>
  <option>Kathryn Murphy</option>
  <option>Lawrence Hunter</option>
  <option>Yvette Armstrong</option>
  <option>Angela Fisher</option>
  <option>Blake Reid</option>
  <option>Hector Gibbons</option>
  <option>Fabricio Mendes</option>
  <option>Jillian Steward</option>
  <option>Chelsea Hagon</option>
</select>
```

--------------------------------

### Input with Label and Help Text

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/input-groups

Enhance usability by including descriptive help text below the input field. This guides users on expected input format or purpose.

```html
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<div class="mt-1">
  <input type="email" name="email" id="email" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="you@example.com">
</div>
<p class="mt-2 text-sm text-gray-500" id="email-description">We'll only use this for spam.</p>
```

--------------------------------

### Command Palette with Preview

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/command-palettes

A command palette that includes a preview pane for selected items. Useful for displaying detailed information upon selection.

```html
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
  <div class="lg:col-span-1">
    <div class="relative w-full max-w-md mx-auto">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
      </div>
      <input type="text" class="block w-full py-3 pl-10 pr-4 text-gray-700 placeholder-gray-400 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search...">
      <div class="absolute inset-y-0 right-0 flex items-center pr-3">
        <button type="button" class="p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md">
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>
    <div class="mt-4 p-4 bg-white border border-gray-200 rounded-md shadow-sm">
      <h3 class="text-lg font-medium text-gray-900 mb-3">Recent searches</h3>
      <div class="space-y-3">
        <p class="text-sm text-gray-600 cursor-pointer hover:text-blue-500">Tom Cook</p>
        <p class="text-sm text-gray-600 cursor-pointer hover:text-blue-500">Courtney Henry</p>
        <p class="text-sm text-gray-600 cursor-pointer hover:text-blue-500">Dries Vincent</p>
        <p class="text-sm text-gray-600 cursor-pointer hover:text-blue-500">Kristin Watson</p>
        <p class="text-sm text-gray-600 cursor-pointer hover:text-blue-500">Jeffrey Webb</p>
      </div>
    </div>
  </div>
  <div class="lg:col-span-2">
    <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-md">
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
          <h3 class="text-lg font-medium text-gray-900">Leslie Alexander</h3>
          <p class="text-sm text-gray-500">Product Manager</p>
        </div>
        <div>
          <h3 class="text-lg font-medium text-gray-900">Michael Foster</h3>
          <p class="text-sm text-gray-500">UX Designer</p>
        </div>
        <div>
          <h3 class="text-lg font-medium text-gray-900">Dries Vincent</h3>
          <p class="text-sm text-gray-500">Software Engineer</p>
        </div>
        <div>
          <h3 class="text-lg font-medium text-gray-900">Lindsay Walton</h3>
          <p class="text-sm text-gray-500">Marketing Specialist</p>
        </div>
        <div>
          <h3 class="text-lg font-medium text-gray-900">Courtney Henry</h3>
          <p class="text-sm text-gray-500">Data Scientist</p>
        </div>
        <div>
          <h3 class="text-lg font-medium text-gray-900">Tom Cook</h3>
          <p class="text-sm text-gray-500">CEO</p>
        </div>
      </div>
      <div class="mt-6 text-center">
        <p class="text-sm text-gray-500">No people found</p>
      </div>
    </div>
    <div class="mt-8 p-6 bg-gray-50 border border-gray-200 rounded-lg shadow-md">
      <h3 class="text-xl font-bold text-gray-900 mb-4">Tom Cook</h3>
      <p class="text-base text-gray-700 mb-2">Director, Product Development</p>
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm text-gray-500">Phone</span>
        <span class="text-sm text-gray-700">881-460-8515</span>
      </div>
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm text-gray-500">URL</span>
        <a href="#" class="text-sm text-blue-500 hover:underline">https://example.com</a>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-sm text-gray-500">Email</span>
        <a href="mailto:tomcook@example.com" class="text-sm text-blue-500 hover:underline">tomcook@example.com Send message</a>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Input with Overlapping Label

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/input-groups

Create a floating label effect where the label starts inside the input and moves above when the input is focused or has content.

```html
<div class="relative">
  <label for="name" class="absolute top-2 left-2 mb-1 text-xs text-gray-400 transition-all duration-100 ease-in-out peer-placeholder-shown:top-2 peer-placeholder-shown:left-2 peer-placeholder-shown:text-sm peer-focus:top-2 peer-focus:left-2 peer-focus:text-xs peer-focus:text-gray-400">Name</label>
  <input id="name" name="name" class="pt-4 pb-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm peer" placeholder=" ">
</div>
```

--------------------------------

### Input with Validation Error

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/input-groups

Visually indicate input errors using distinct styling. This example shows a red border and an error message below the input.

```html
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<div class="mt-1">
  <input type="email" name="email" id="email" class="block w-full rounded-md border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500" placeholder="you@example.com" aria-invalid="true" aria-describedby="email-error">
</div>
<p class="mt-2 text-sm text-red-600" id="email-error">Not a valid email address.</p>
```

--------------------------------

### Simple Command Palette

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/command-palettes

A basic command palette component. Use this for a straightforward search and command interface.

```html
<div class="relative w-full max-w-lg mx-auto">
  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </div>
  <input type="text" class="block w-full py-3 pl-10 pr-4 text-gray-700 placeholder-gray-400 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search...">
  <div class="absolute inset-y-0 right-0 flex items-center pr-3">
    <button type="button" class="p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md">
      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>
</div>

<div class="mt-4 p-4 bg-white border border-gray-200 rounded-md shadow-sm">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <div>
      <h3 class="text-lg font-medium text-gray-900">Leslie Alexander</h3>
      <p class="text-sm text-gray-500">Product Manager</p>
    </div>
    <div>
      <h3 class="text-lg font-medium text-gray-900">Michael Foster</h3>
      <p class="text-sm text-gray-500">UX Designer</p>
    </div>
    <div>
      <h3 class="text-lg font-medium text-gray-900">Dries Vincent</h3>
      <p class="text-sm text-gray-500">Software Engineer</p>
    </div>
    <div>
      <h3 class="text-lg font-medium text-gray-900">Lindsay Walton</h3>
      <p class="text-sm text-gray-500">Marketing Specialist</p>
    </div>
    <div>
      <h3 class="text-lg font-medium text-gray-900">Courtney Henry</h3>
      <p class="text-sm text-gray-500">Data Scientist</p>
    </div>
    <div>
      <h3 class="text-lg font-medium text-gray-900">Tom Cook</h3>
      <p class="text-sm text-gray-500">CEO</p>
    </div>
  </div>
  <div class="mt-6 text-center">
    <p class="text-sm text-gray-500">No people found.</p>
  </div>
</div>
```

--------------------------------

### Divider with Title and Button

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/layout/dividers

Combines a title with a button, creating a distinct section header that also offers an interactive element. Requires Tailwind CSS setup.

```html
<div class="relative">
  <div class="absolute inset-0 flex items-center" aria-hidden="true">
    <div class="w-full border-t border-gray-300"></div>
  </div>
  <div class="relative flex justify-between items-center">
    <span class="bg-white pr-3 text-lg font-semibold leading-6 text-gray-900">Projects</span>
    <span class="inline-flex items-center rounded-md bg-white px-2.5 py-0.5 text-sm font-medium text-gray-900 ring-1 ring-inset ring-gray-400/50">
      Button text
    </span>
  </div>
</div>
```

--------------------------------

### Simple Command Palette with Padding

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/command-palettes

A command palette with added padding for better visual spacing. Suitable for interfaces where more breathing room is desired.

```html
<div class="relative w-full max-w-lg mx-auto">
  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </div>
  <input type="text" class="block w-full py-4 pl-12 pr-10 text-lg text-gray-900 placeholder-gray-400 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Search...">
  <div class="absolute inset-y-0 right-0 flex items-center pr-4">
    <button type="button" class="p-2 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md">
      <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>
</div>

<div class="mt-6 p-6 bg-white border border-gray-200 rounded-lg shadow-md">
  <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
    <div>
      <h3 class="text-xl font-semibold text-gray-900">Leslie Alexander</h3>
      <p class="text-base text-gray-600">Product Manager</p>
    </div>
    <div>
      <h3 class="text-xl font-semibold text-gray-900">Michael Foster</h3>
      <p class="text-base text-gray-600">UX Designer</p>
    </div>
    <div>
      <h3 class="text-xl font-semibold text-gray-900">Dries Vincent</h3>
      <p class="text-base text-gray-600">Software Engineer</p>
    </div>
    <div>
      <h3 class="text-xl font-semibold text-gray-900">Lindsay Walton</h3>
      <p class="text-base text-gray-600">Marketing Specialist</p>
    </div>
    <div>
      <h3 class="text-xl font-semibold text-gray-900">Courtney Henry</h3>
      <p class="text-base text-gray-600">Data Scientist</p>
    </div>
    <div>
      <h3 class="text-xl font-semibold text-gray-900">Tom Cook</h3>
      <p class="text-base text-gray-600">CEO</p>
    </div>
  </div>
  <div class="mt-8 text-center">
    <p class="text-base text-gray-500">No people found using that search term.</p>
  </div>
</div>
```

--------------------------------

### Page Heading with Actions

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/headings/page-headings

A simple page heading with primary and secondary action buttons.

```html
<div class="lg:flex lg:items-center lg:justify-between">
  <div class="min-w-0 flex-1">
    <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">Back End Developer</h2>
  </div>
  <div class="mt-5 flex lg:ml-4 lg:mt-0">
    <span class="sm:ml-3">
      <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
        Edit
      </button>
    </span>

    <span class="sm:ml-3">
      <button type="button" class="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
        Publish
      </button>
    </span>
  </div>
</div>
```

--------------------------------

### Dashboard with Lighter Page Header

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/stacked

A stacked layout example for a dashboard featuring a lighter page header. This layout is responsive and optimized for various screen sizes.

```html
<div class="bg-gray-100 min-h-screen">
  <nav class="bg-white shadow">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow logo">
          </div>
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline space-x-4">
              <a href="#" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium"> Dashboard </a>
              <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"> Team </a>
              <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"> Projects </a>
              <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"> Calendar </a>
              <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"> Reports </a>
            </div>
          </div>
        </div>
        <div class="hidden md:block">
          <div class="ml-4 flex items-center md:ml-6">
            <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:shadow-outline hover:text-gray-500 focus:shadow-outline" aria-label="Notifications">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.5 1.5L15 20v-3zM3 12V7a2 2 0 012-2h10a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2v-5z" />
              </svg>
            </button>

            <div class="ml-3 relative">
              <div>
                <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true">
                  <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-f86f2270ba1d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                </button>
              </div>
              <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
                <div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a>
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="-mr-2 flex md:hidden">
          <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-label="Open main menu" aria-expanded="false">
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="md:hidden" id="mobile-menu">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <a href="#" class="text-gray-900 block px-3 py-2 rounded-md text-base font-medium"> Dashboard </a>
        <a href="#" class="text-gray-500 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium"> Team </a>
        <a href="#" class="text-gray-500 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium"> Projects </a>
        <a href="#" class="text-gray-500 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium"> Calendar </a>
        <a href="#" class="text-gray-500 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium"> Reports </a>
      </div>
      <div class="pt-4 pb-3 border-t border-gray-200">
        <div class="flex items-center px-5">
          <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-f86f2270ba1d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
          </div>
          <div class="ml-3">
            <div class="text-base font-medium leading-none text-gray-800">Tom Cook</div>
            <div class="text-sm font-medium leading-none text-gray-500">tom@example.com</div>
          </div>
        </div>
        <div class="mt-3 px-2 space-y-1">
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Your Profile</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Settings</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Sign out</a>
        </div>
      </div>
    </div>
  </nav>

  <header class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
      <h1 class="text-lg leading-6 font-semibold text-gray-900">Dashboard</h1>
    </div>
  </header>
  <main>
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <div class="px-4 py-6 sm:px-0">
        <div class="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
      </div>
    </div>
  </main>
</div>
```

--------------------------------

### Input with Add-on

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/input-groups

Combine an input field with a static text add-on, typically placed before or after the input, to provide context like a URL prefix.

```html
<label for="company-website" class="block text-sm font-medium text-gray-700">Company website</label>
<div class="mt-1 flex rounded-md shadow-sm">
  <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500">
    https://
  </span>
  <input type="text" name="company-website" id="company-website" class="block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="www.example.com">
</div>
```

--------------------------------

### Dashboard with Bottom Border Navigation

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/stacked

A stacked layout for a dashboard with a navigation bar that includes a bottom border. This example is suitable for creating distinct visual separation for the navigation.

```html
<div class="bg-gray-100 min-h-screen">
  <nav class="border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow logo">
          </div>
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline space-x-4">
              <a href="#" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium"> Dashboard </a>
              <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"> Team </a>
              <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"> Projects </a>
              <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"> Calendar </a>
              <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"> Reports </a>
            </div>
          </div>
        </div>
        <div class="hidden md:block">
          <div class="ml-4 flex items-center md:ml-6">
            <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:shadow-outline hover:text-gray-500 focus:shadow-outline" aria-label="Notifications">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.5 1.5L15 20v-3zM3 12V7a2 2 0 012-2h10a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2v-5z" />
              </svg>
            </button>

            <div class="ml-3 relative">
              <div>
                <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true">
                  <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-f86f2270ba1d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                </button>
              </div>
              <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
                <div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a>
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="-mr-2 flex md:hidden">
          <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-label="Open main menu" aria-expanded="false">
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="md:hidden" id="mobile-menu">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <a href="#" class="text-gray-900 block px-3 py-2 rounded-md text-base font-medium"> Dashboard </a>
        <a href="#" class="text-gray-500 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium"> Team </a>
        <a href="#" class="text-gray-500 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium"> Projects </a>
        <a href="#" class="text-gray-500 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium"> Calendar </a>
        <a href="#" class="text-gray-500 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium"> Reports </a>
      </div>
      <div class="pt-4 pb-3 border-t border-gray-200">
        <div class="flex items-center px-5">
          <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-f86f2270ba1d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
          </div>
          <div class="ml-3">
            <div class="text-base font-medium leading-none text-gray-800">Tom Cook</div>
            <div class="text-sm font-medium leading-none text-gray-500">tom@example.com</div>
          </div>
        </div>
        <div class="mt-3 px-2 space-y-1">
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Your Profile</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Settings</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Sign out</a>
        </div>
      </div>
    </div>
  </nav>

  <header class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
      <h1 class="text-lg leading-6 font-semibold text-gray-900">Dashboard</h1>
    </div>
  </header>
  <main>
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <div class="px-4 py-6 sm:px-0">
        <div class="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
      </div>
    </div>
  </main>
</div>
```

--------------------------------

### Wide Create Project Form Drawer

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/drawers

An expanded version of the project creation form drawer, offering more space for input fields and content. This is suitable for complex forms or when more detailed information is required.

```html
<div class="fixed inset-0 z-30 overflow-hidden transition duration-150 ease-in-out transform bg-gray-900 bg-opacity-75">
    <div class="absolute inset-y-0 left-0 w-full overflow-y-auto transition duration-150 ease-in-out transform bg-white shadow-xl sm:w-96">
      <div class="flex flex-col h-full">
        <div class="px-4 py-6 sm:px-8">
          <div class="flex items-center justify-between">
            <h2 class="text-lg font-medium text-gray-900">New project</h2>
            <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500" aria-label="Close panel">
              <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
          </div>
          <p class="mt-4 text-gray-500">Get started by filling in the information below to create your new project.</p>
          <div class="mt-6">
            <label for="project-name" class="block text-sm font-medium text-gray-700">Project name</label>
            <input type="text" name="project-name" id="project-name" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
          </div>
          <div class="mt-6">
            <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
            <textarea id="description" name="description" rows="3" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
          </div>
          <div class="mt-6">
            <h3 class="text-sm font-medium text-gray-700">Team Members</h3>
            <button type="button" class="flex items-center justify-center w-full px-4 py-2 mt-2 text-sm font-medium text-indigo-700 border border-indigo-200 rounded-md hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Add team member
            </button>
          </div>
          <fieldset class="mt-6">
            <legend class="text-sm font-medium text-gray-700">Privacy</legend>
            <div class="space-y-2">
              <div class="flex items-center">
                <input id="privacy-public" name="privacy" type="radio" class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
                <label for="privacy-public" class="ml-3 block text-sm font-medium text-gray-700"> Public access </label>
                <p class="ml-2 text-gray-500 text-sm">Everyone with the link will see this project.</p>
              </div>
              <div class="flex items-center">
                <input id="privacy-private-project" name="privacy" type="radio" class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
                <label for="privacy-private-project" class="ml-3 block text-sm font-medium text-gray-700"> Private to project members </label>
                <p class="ml-2 text-gray-500 text-sm">Only members of this project would be able to access.</p>
              </div>
              <div class="flex items-center">
                <input id="privacy-private-you" name="privacy" type="radio" checked class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
                <label for="privacy-private-you" class="ml-3 block text-sm font-medium text-gray-700"> Private to you </label>
                <p class="ml-2 text-gray-500 text-sm">You are the only one able to access this project.</p>
              </div>
            </div>
          </fieldset>
          <div class="mt-6">
            <button type="button" class="text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline">
              Copy link
            </button>
            <p class="mt-1 text-xs text-gray-500">Learn more about sharing</p>
          </div>
        </div>
        <div class="mt-auto">
          <div class="flex justify-end px-4 py-4 border-t border-gray-200 sm:px-8">
            <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:text-gray-500 focus:outline-none focus:text-gray-500">
              Cancel
            </button>
            <button type="submit" class="px-4 py-2 ml-3 text-sm font-medium text-white rounded-md bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:bg-indigo-700">
              Create
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
```

--------------------------------

### Textarea with Preview Button

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/textareas

A textarea component that includes a 'Preview' button, allowing users to see their input rendered before posting.

```html
<div class="border border-gray-300 rounded-md shadow-sm overflow-hidden">
  <div class="px-4 py-2 bg-white">
    <label for="comment" class="sr-only">Comment</label>
    <textarea id="comment" name="comment" rows="3" class="w-full border-0 p-0 text-gray-900 placeholder-gray-400 focus:ring-0 sm:text-sm" placeholder="Write a few sentences about yourself..."></textarea>
  </div>
  <div class="py-2 px-4 bg-gray-50 border-t border-gray-200 flex justify-between items-center">
    <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
      Preview
    </button>
    <button type="submit" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
      Post
    </button>
  </div>
</div>
```
Tokens:
Raw