JSFiddle - React, Tailwind, and code Playground

by philw_

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.2.10/what-input.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<div class="flex text-3xl m-4 gap-6" x-data="{ searchExpanded: 0 }" @click.away="searchExpanded = false">
  <ul class="flex whitespace-no-wrap overflow-hidden gap-6">
    <li><a href="/1" class="hover:text-green-600 focus:text-green-600">Nav item 1</a></li>
    <li><a href="/2" class="hover:text-green-600 focus:text-green-600">Nav item 2</a></li>
    <li><a href="/3" class="hover:text-green-600 focus:text-green-600">Nav item 3</a></li>
    <li><a href="/4" class="hover:text-green-600 focus:text-green-600">Nav item 4</a></li>
    <li><a href="/5" class="hover:text-green-600 focus:text-green-600">Nav item 5</a></li>
  </ul>

  <form class="flex flex-1 justify-end gap-2" action="https://www.example.com">
    <div class="relative">
      <label for="query" class="sr-only">Search</label>
      <input x-ref="query" id="query" type="text" class="border-b-2 border-green-600 ease-in-out duration-200 transition-all" :style="!searchExpanded ? 'width:0px' : 'width:200px'" :class="{'pr-6': searchExpanded}" @focus="searchExpanded = true">
    <button x-cloak type="button" class="absolute top-0 bottom-0 right-0 text-red-800 focus:text-red-600 hover:text-red-600" @click="searchExpanded = false; $refs.query.value = '';" x-show="searchExpanded" aria-label="Close search">
      <span data-feather="x"></span>
    </button>
    </div>
    <button type="submit" class="focus:text-green-600 hover:text-green-600" @click="
      if (!searchExpanded) {
        searchExpanded = true; 
        $refs.query.focus();
        $event.preventDefault()
      }
    " aria-label="Search">
      <span data-feather="search"></span>
    </button>
 ...

CSS

[x-cloak] {
      display: none;
    }

    [data-whatintent='mouse'] *:focus {
      outline: none;
    }