Made header sticky

This commit is contained in:
Corey 2020-05-26 11:19:31 +08:00
parent 9ce75f728f
commit f5383e47e2

View file

@ -37,73 +37,68 @@
spellcheck="false" spellcheck="false"
class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl" class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
/> />
<div </div>
class="flex flex-col space-y-4 md:space-y-0 md:flex-row border-t border-gray-300 bg-white pt-4" <div
class="flex flex-col space-y-4 md:space-y-0 md:flex-row border-t border-gray-300 bg-white pt-4 px-8 sticky top-0"
>
<label
class="inline-flex items-center cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
> >
<label <input
class="inline-flex items-center cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white" type="radio"
> class="form-radio"
<input name="clickType"
type="radio" value="copy"
class="form-radio" checked
name="clickType" />
value="copy" <span class="ml-2">Copy SVG Code</span>
checked </label>
/> <label
<span class="ml-2">Copy SVG Code</span> class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
</label> >
<label <input type="radio" class="form-radio" name="clickType" value="link" />
class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white" <span class="ml-2">&lt;img/&gt; Link</span>
> </label>
<input <label
type="radio" class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
class="form-radio" >
name="clickType" <input
value="link" type="radio"
/> class="form-radio"
<span class="ml-2">&lt;img/&gt; Link</span> name="clickType"
</label> value="download"
<label />
class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white" <span class="ml-2">Download SVGs</span>
> </label>
<input <button
type="radio" class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white hover:bg-gray-900 w-full md:w-auto"
class="form-radio" >
name="clickType" <span class="mr-4">
value="download" <svg
/> height="21"
<span class="ml-2">Download SVGs</span> viewBox="0 0 21 21"
</label> width="21"
<button xmlns="http://www.w3.org/2000/svg"
class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white hover:bg-gray-900 w-full md:w-auto" >
> <g
<span class="mr-4"> fill="none"
<svg fill-rule="evenodd"
height="21" stroke="currentcolor"
viewBox="0 0 21 21" stroke-linecap="round"
width="21" stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg" transform="translate(4 3)"
> >
<g <path
fill="none" d="m9.221 4.716.165 5.821-5.792-.135"
fill-rule="evenodd" transform="matrix(-.70710678 .70710678 .70710678 .70710678 5.685139 -2.354861)"
stroke="currentcolor" />
stroke-linecap="round" <path d="m6.5.5v11" />
stroke-linejoin="round" <path d="m.5 14.5h12" />
transform="translate(4 3)" </g>
> </svg>
<path </span>
d="m9.221 4.716.165 5.821-5.792-.135" Download All SVGs
transform="matrix(-.70710678 .70710678 .70710678 .70710678 5.685139 -2.354861)" </button>
/>
<path d="m6.5.5v11" />
<path d="m.5 14.5h12" />
</g>
</svg>
</span>
Download All SVGs
</button>
</div>
</div> </div>
<div <div
class="p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-4" class="p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-4"