dymk/redux-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add icon to input

Browse Source
This commit is contained in:
Dylan Knutson
2023-04-02 14:47:34 +09:00
parent c2997f4d5f
commit 9468e570d9
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/views/pages/root.html.erb
View File

@@ -1,14 +1,23 @@
<div class='w-full mt-2 sm:mt-6'>
<div class="block mx-auto w-full p-2
sm:p-6 sm:border-2 sm:border-slate-100 sm:max-w-md rounded
sm:p-6 sm:border-2 sm:border-slate-100 sm:max-w-md rounded-3xl
focus-within:border-slate-200 focus-within:shadow-md
transition-all duration-75
">
<input class="w-full text-xl font-extralight p-4 outline-none rounded
placeholder:italic transition-all duration-75
border-slate-200 border-2 bg-slate-100 text-slate-900
focus:border-slate-400"
placeholder="Enter Username"
/>
<label class="relative block text-slate-500 focus-within:text-slate-900">
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6 pointer-events-none absolute top-1/2 transform -translate-y-1/2 left-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<input class="w-full text-xl font-extralight p-4 pl-10 outline-none rounded-xl
placeholder:italic transition-all duration-75
border-slate-200 border-2 bg-slate-100
focus:border-slate-400"
placeholder="Enter Username" />
</label>
</div>
</div>