Mirroring/tailblocks
1
0
Fork 0
mirror of https://github.com/mertJF/tailblocks.git synced 2025-12-10 17:55:35 +00:00
Code Issues Projects Releases Wiki Activity

added labels to all fields

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

40
src/blocks/cta/light/c.js
View File

@@ -15,17 +15,35 @@ function LightCTAC(props) {
haven't heard of them man bun deep.
</p>
</div>
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
<input
className={`flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
placeholder="Full Name"
type="text"
></input>
<input
className={`flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
placeholder="Email"
type="email"
></input>
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-center">
<div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
<label
for="full-name"
class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
>
Full Name
</label>
<input
type="text"
id="full-name"
name="full-name"
class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
<label
for="email"
class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
>
Email
</label>
<input
type="email"
id="email"
name="email"
class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>