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

@@ -25,15 +25,33 @@ function DarkContactA(props) {
<p className="leading-relaxed mb-5 text-gray-500">
Post-ironic portland shabby chic echo park, banjo fashion axe
</p>
<input
className={`bg-gray-800 text-white rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
placeholder="Email"
type="email"
></input>
<textarea
className={`bg-gray-800 text-white rounded border border-gray-700 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
placeholder="Message"
></textarea>
<div class="relative mb-4">
<label
for="email"
class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
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>
<div class="relative mb-4">
<label
for="message"
class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
>
Message
</label>
<textarea
id="message"
name="message"
class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 pt-6 pb-1 px-3 resize-none leading-8 transition-colors duration-200 ease-in-out`}
></textarea>
</div>
<button className={`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>