added labels to all fields

This commit is contained in:
Gaurav Saini
2020-05-29 12:39:36 +05:30
parent 710b1911af
commit 4ddcd09b6c
20 changed files with 481 additions and 175 deletions

View File

@@ -16,12 +16,21 @@ function DarkHeroE(props) {
Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
</p>
<div className="flex w-full md:justify-start justify-center">
<input
className={`bg-gray-800 rounded mr-4 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 md:w-full lg:w-full xl:w-1/2 w-2/4`}
placeholder="Placeholder"
type="text"
></input>
<div className="flex w-full md:justify-start justify-center items-center">
<div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
<label
for="hero-field"
class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
>
Placeholder
</label>
<input
type="text"
id="hero-field"
name="hero-field"
class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>