Mirroring/tailblocks
1
0
Fork 0
mirror of https://github.com/mertJF/tailblocks.git synced 2025-12-08 17:03:24 +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

36
src/blocks/contact/dark/a.js
View File

@@ -25,15 +25,33 @@ function DarkContactA(props) {
<p className="leading-relaxed mb-5 text-gray-500"> <p className="leading-relaxed mb-5 text-gray-500">
Post-ironic portland shabby chic echo park, banjo fashion axe Post-ironic portland shabby chic echo park, banjo fashion axe
</p> </p>
<input <div class="relative mb-4">
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`} <label
placeholder="Email" for="email"
type="email" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
<textarea Email
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`} </label>
placeholder="Message" <input
></textarea> 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 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
</button> </button>

55
src/blocks/contact/dark/b.js
View File

@@ -49,20 +49,47 @@ function DarkContactB(props) {
<p className="leading-relaxed mb-5 text-gray-600"> <p className="leading-relaxed mb-5 text-gray-600">
Post-ironic portland shabby chic echo park, banjo fashion axe Post-ironic portland shabby chic echo park, banjo fashion axe
</p> </p>
<input <div class="relative mb-4">
className={`bg-gray-800 rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4`} <label
placeholder="Name" for="name"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
<input Name
className={`bg-gray-800 rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4`} </label>
placeholder="Email" <input
type="email" type="text"
></input> id="name"
<textarea name="name"
className={`bg-gray-800 rounded border border-gray-700 focus:outline-none h-32 focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4 resize-none`} 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`}
placeholder="Message" />
></textarea> </div>
<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 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
</button> </button>

55
src/blocks/contact/dark/c.js
View File

@@ -17,24 +17,51 @@ function DarkContactC(props) {
<div className="lg:w-1/2 md:w-2/3 mx-auto"> <div className="lg:w-1/2 md:w-2/3 mx-auto">
<div className="flex flex-wrap -m-2"> <div className="flex flex-wrap -m-2">
<div className="p-2 w-1/2"> <div className="p-2 w-1/2">
<input <div class="relative">
className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`} <label
placeholder="Name" for="name"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
Name
</label>
<input
type="text"
id="name"
name="name"
class={`w-full bg-gray-800 rounded border border-gray-700 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> </div>
<div className="p-2 w-1/2"> <div className="p-2 w-1/2">
<input <div class="relative">
className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`} <label
placeholder="Email" for="email"
type="email" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
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> </div>
<div className="p-2 w-full"> <div className="p-2 w-full">
<textarea <div class="relative">
className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none h-48 focus:border-${props.theme}-500 text-base px-4 py-2 resize-none block`} <label
placeholder="Message" for="message"
></textarea> 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>
</div> </div>
<div className="p-2 w-full"> <div className="p-2 w-full">
<button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}> <button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>

36
src/blocks/contact/light/a.js
View File

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

55
src/blocks/contact/light/b.js
View File

@@ -49,20 +49,47 @@ function LightContactB(props) {
<p className="leading-relaxed mb-5 text-gray-600"> <p className="leading-relaxed mb-5 text-gray-600">
Post-ironic portland shabby chic echo park, banjo fashion axe Post-ironic portland shabby chic echo park, banjo fashion axe
</p> </p>
<input <div class="relative mb-4">
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`} <label
placeholder="Name" for="name"
type="text" class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
></input> >
<input Name
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`} </label>
placeholder="Email" <input
type="email" type="text"
></input> id="name"
<textarea name="name"
className={`bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`} class={`w-full bg-white 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`}
placeholder="Message" />
></textarea> </div>
<div class="relative mb-4">
<label
for="email"
class="bg-white 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-white 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 mb-4">
<label
for="message"
class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
class={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 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 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
</button> </button>

55
src/blocks/contact/light/c.js
View File

@@ -17,24 +17,51 @@ function LightContactC(props) {
<div className="lg:w-1/2 md:w-2/3 mx-auto"> <div className="lg:w-1/2 md:w-2/3 mx-auto">
<div className="flex flex-wrap -m-2"> <div className="flex flex-wrap -m-2">
<div className="p-2 w-1/2"> <div className="p-2 w-1/2">
<input <div class="relative">
className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`} <label
placeholder="Name" for="name"
type="text" class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
></input> >
Name
</label>
<input
type="text"
id="name"
name="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> </div>
<div className="p-2 w-1/2"> <div className="p-2 w-1/2">
<input <div class="relative">
className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`} <label
placeholder="Email" for="email"
type="email" class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
></input> >
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>
</div> </div>
<div className="p-2 w-full"> <div className="p-2 w-full">
<textarea <div class="relative">
className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none h-48 focus:border-${props.theme}-500 text-base px-4 py-2 resize-none block`} <label
placeholder="Message" for="message"
></textarea> class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 pt-6 pb-1 px-3 resize-none leading-8 transition-colors duration-200 ease-in-out`}
></textarea>
</div>
</div> </div>
<div className="p-2 w-full"> <div className="p-2 w-full">
<button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}> <button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>

38
src/blocks/cta/dark/b.js
View File

@@ -18,16 +18,34 @@ function DarkCTAB(props) {
<h2 className="text-white text-lg font-medium title-font mb-5"> <h2 className="text-white text-lg font-medium title-font mb-5">
Sign Up Sign Up
</h2> </h2>
<input <div class="relative mb-4">
className={`bg-gray-900 rounded border text-white border-gray-900 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`} <label
placeholder="Full Name" for="full-name"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
<input Full Name
className={`bg-gray-900 rounded border text-white border-gray-900 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`} </label>
placeholder="Email" <input
type="email" type="text"
></input> id="full-name"
name="full-name"
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="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>
<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 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
</button> </button>

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

@@ -15,17 +15,35 @@ function DarkCTAC(props) {
haven&apos;t heard of them man bun deep. haven&apos;t heard of them man bun deep.
</p> </p>
</div> </div>
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0"> <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-center">
<input <div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
className={`flex-grow w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`} <label
placeholder="Full Name" for="full-name"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
<input Full Name
className={`flex-grow w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`} </label>
placeholder="Email" <input
type="email" type="text"
></input> id="full-name"
name="full-name"
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 sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
<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>
<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 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
</button> </button>

38
src/blocks/cta/light/b.js
View File

@@ -18,16 +18,34 @@ function LightCTAB(props) {
<h2 className="text-gray-900 text-lg font-medium title-font mb-5"> <h2 className="text-gray-900 text-lg font-medium title-font mb-5">
Sign Up Sign Up
</h2> </h2>
<input <div class="relative mb-4">
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`} <label
placeholder="Full Name" for="full-name"
type="text" class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
></input> >
<input Full Name
className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`} </label>
placeholder="Email" <input
type="email" type="text"
></input> id="full-name"
name="full-name"
class={`w-full bg-white 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 mb-4">
<label
for="email"
class="bg-white 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-white 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 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
</button> </button>

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

@@ -15,17 +15,35 @@ function LightCTAC(props) {
haven&apos;t heard of them man bun deep. haven&apos;t heard of them man bun deep.
</p> </p>
</div> </div>
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0"> <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-center">
<input <div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
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`} <label
placeholder="Full Name" for="full-name"
type="text" class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
></input> >
<input Full Name
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`} </label>
placeholder="Email" <input
type="email" type="text"
></input> 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 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
</button> </button>

21
src/blocks/footer/dark/c.js
View File

@@ -124,12 +124,21 @@ function DarkFooterC(props) {
</div> </div>
<div className="border-t border-gray-800"> <div className="border-t border-gray-800">
<div className="container px-5 py-8 flex flex-wrap mx-auto items-center"> <div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
<div className="flex md:flex-no-wrap flex-wrap justify-center md:justify-start"> <div className="flex md:flex-no-wrap flex-wrap justify-center items-center md:justify-start">
<input <div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
className={`sm:w-64 w-40 bg-gray-800 rounded sm:mr-4 mr-2 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`} <label
placeholder="Placeholder" for="footer-field"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
Placeholder
</label>
<input
type="text"
id="footer-field"
name="footer-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`}> <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`}>
Button Button
</button> </button>

21
src/blocks/footer/dark/e.js
View File

@@ -67,12 +67,21 @@ function DarkFooterE(props) {
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3"> <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
SUBSCRIBE SUBSCRIBE
</h2> </h2>
<div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center md:justify-start"> <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center items-center md:justify-start">
<input <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
className={`w-40 sm:w-auto bg-gray-800 rounded text-white xl:mr-4 lg:mr-0 sm:mr-4 mr-2 border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`} <label
placeholder="Placeholder" for="footer-field"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
Placeholder
</label>
<input
type="text"
id="footer-field"
name="footer-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={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}> <button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
Button Button
</button> </button>

21
src/blocks/footer/light/c.js
View File

@@ -124,12 +124,21 @@ function LightFooterC(props) {
</div> </div>
<div className="border-t border-gray-200"> <div className="border-t border-gray-200">
<div className="container px-5 py-8 flex flex-wrap mx-auto items-center"> <div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
<div className="flex md:flex-no-wrap flex-wrap justify-center md:justify-start"> <div className="flex md:flex-no-wrap flex-wrap justify-center items-center md:justify-start">
<input <div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
className={`sm:w-64 w-40 bg-gray-100 rounded sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`} <label
placeholder="Placeholder" for="footer-field"
type="text" class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
/> >
Placeholder
</label>
<input
type="text"
id="footer-field"
name="footer-field"
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={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}> <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`}>
Button Button
</button> </button>

21
src/blocks/footer/light/e.js
View File

@@ -67,12 +67,21 @@ function LightFooterE(props) {
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3"> <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
SUBSCRIBE SUBSCRIBE
</h2> </h2>
<div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center md:justify-start"> <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center items-center md:justify-start">
<input <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
className={`w-40 sm:w-auto bg-gray-100 rounded xl:mr-4 lg:mr-0 sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`} <label
placeholder="Placeholder" for="footer-field"
type="text" class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
></input> >
Placeholder
</label>
<input
type="text"
id="footer-field"
name="footer-field"
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={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}> <button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
Button Button
</button> </button>

21
src/blocks/hero/dark/d.js
View File

@@ -13,12 +13,21 @@ function DarkHeroD(props) {
Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher. swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
</p> </p>
<div className="flex w-full md:justify-start justify-center"> <div className="flex w-full md:justify-start justify-center items-center">
<input <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
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`} <label
placeholder="Placeholder" for="hero-field"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
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 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
</button> </button>

21
src/blocks/hero/dark/e.js
View File

@@ -16,12 +16,21 @@ function DarkHeroE(props) {
Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher. swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
</p> </p>
<div className="flex w-full md:justify-start justify-center"> <div className="flex w-full md:justify-start justify-center items-center">
<input <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
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`} <label
placeholder="Placeholder" for="hero-field"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
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 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
</button> </button>

21
src/blocks/hero/dark/f.js
View File

@@ -15,12 +15,21 @@ function DarkHeroF(props) {
live-edge tumeric scenester copper mug flexitarian. Prism vice offal live-edge tumeric scenester copper mug flexitarian. Prism vice offal
plaid everyday carry. Gluten-free chia VHS squid listicle artisan. plaid everyday carry. Gluten-free chia VHS squid listicle artisan.
</p> </p>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center items-center">
<input <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full">
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`} <label
placeholder="Placeholder" for="hero-field"
type="text" class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
></input> >
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 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
</button> </button>

19
src/blocks/hero/light/d.js
View File

@@ -14,11 +14,20 @@ function LightHeroD(props) {
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher. swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
</p> </p>
<div className="flex w-full md:justify-start justify-center"> <div className="flex w-full md:justify-start justify-center">
<input <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
className={`bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4 md:w-full`} <label
placeholder="Placeholder" for="hero-field"
type="text" class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
/> >
Placeholder
</label>
<input
type="text"
id="hero-field"
name="hero-field"
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={`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 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
</button> </button>

21
src/blocks/hero/light/e.js
View File

@@ -16,12 +16,21 @@ function LightHeroE(props) {
Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
swag typewriter affogato, hella selvage wolf narwhal dreamcatcher. swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
</p> </p>
<div className="flex w-full md:justify-start justify-center"> <div className="flex w-full md:justify-start justify-center items-center">
<input <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
className={`bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4`} <label
placeholder="Placeholder" for="hero-field"
type="text" class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
/> >
Placeholder
</label>
<input
type="text"
id="hero-field"
name="hero-field"
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={`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 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
</button> </button>

21
src/blocks/hero/light/f.js
View File

@@ -15,12 +15,21 @@ function LightHeroF(props) {
live-edge tumeric scenester copper mug flexitarian. Prism vice offal live-edge tumeric scenester copper mug flexitarian. Prism vice offal
plaid everyday carry. Gluten-free chia VHS squid listicle artisan. plaid everyday carry. Gluten-free chia VHS squid listicle artisan.
</p> </p>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center items-center">
<input <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full">
className={`border-0 bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4 md:w-full`} <label
placeholder="Placeholder" for="hero-field"
type="text" class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
/> >
Placeholder
</label>
<input
type="text"
id="hero-field"
name="hero-field"
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={`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 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
</button> </button>