Skip to content

Commit ceb8163

Browse files
jsvigneshkannajsvigneshkanna
committed
contact form plagarism removed
1 parent fc204a3 commit ceb8163

File tree

4 files changed

+125
-39
lines changed

4 files changed

+125
-39
lines changed

‎tailwind_components/contact_forms/collection.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import VerticalContactForm from "./vertical_contact_form";
22
import contactForm from "./standard_contact_form";
33
import SubsriptionContactForm from "./subscription_contact_form";
4-
import ImageContactForm from './image_contact_form'
4+
import ImageContactForm from "./image_contact_form";
5+
56
const contactFormsCollection = [
67
{componentName: "Vertical contact form", component: VerticalContactForm},
78
{componentName: "Sample Contact form", component: contactForm},

‎tailwind_components/contact_forms/standard_contact_form.jsx‎

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,62 @@
1-
import { stripIndent } from "react-codepen-prefill-embed";
1+
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const contactForm = stripIndent`
4-
<div class="flex h-full w-full items-center justify-center bg-slate-800">
5-
<div class="my-10 rounded-xl border mx-5 border-gray-200 bg-white shadow-md">
6-
<a href="#"> </a>
4+
<div class="flex h-screen w-full items-center justify-center bg-rose-300">
5+
<div class="my-10 mx-5 rounded-xl border border-gray-200 bg-white shadow-md">
76
<div class="flex flex-col items-center justify-center p-6 text-center">
8-
<a href="#"> </a>
9-
10-
<h5 class="mb-1 px-4 font-bold tracking-tight text-gray-700">Contact Us</h5>
7+
<h5 class="mb-1 px-4 font-bold tracking-tight text-gray-700">
8+
Contact Us
9+
</h5>
1110
<h1 class="mb-5 text-3xl font-bold">Make an Appointment</h1>
12-
<div class="mx-10 grid grid-cols-2 justify-start">
13-
<input class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" id="username" type="text" placeholder="Full Name *" />
14-
<input class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" id="username" type="text" placeholder="Email *" />
15-
<select class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none" aria-label="Default select example">
11+
<div class="mx-10 grid grid-cols-2 justify-start gap-3">
12+
<input
13+
class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
14+
id="username"
15+
type="text"
16+
placeholder="Full Name *"
17+
/>
18+
<input
19+
class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
20+
id="username"
21+
type="text"
22+
placeholder="Email *"
23+
/>
24+
<select
25+
class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none"
26+
aria-label="Default select example"
27+
>
1628
<option selected>Please Select</option>
1729
<option value="1">One</option>
1830
<option value="2">Two</option>
1931
<option value="3">Three</option>
2032
</select>
21-
<select class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none" aria-label="Default select example">
33+
<select
34+
class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none"
35+
aria-label="Default select example"
36+
>
2237
<option selected>4:00 Available</option>
2338
<option value="1">One</option>
2439
<option value="2">Two</option>
2540
<option value="3">Three</option>
2641
</select>
2742
</div>
28-
<label for="message" class="mb-2 mt-2 block text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
29-
<textarea id="message" rows="4" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="Your message..."></textarea>
30-
<button type="button" class="mr-2 mb-2 mt-4 rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Book Appointment</button>
43+
<label
44+
for="message"
45+
class="mb-2 mt-2 block text-sm font-medium text-gray-900 dark:text-gray-400"
46+
>Your message</label
47+
>
48+
<textarea
49+
id="message"
50+
rows="4"
51+
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
52+
placeholder="Your message..."
53+
></textarea>
54+
<button
55+
type="button"
56+
class="mr-2 mb-2 mt-4 rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
57+
>
58+
Book Appointment
59+
</button>
3160
</div>
3261
</div>
3362
</div>

‎tailwind_components/contact_forms/subscription_contact_form.jsx‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,34 @@ import React from "react";
22
import {stripIndent} from "react-codepen-prefill-embed";
33

44
const SubsriptionContactForm = stripIndent`
5-
<div class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-50 p-8 sm:p-12">
6-
<div class="w-full max-w-4xl rounded-md border-2 border-gray-100 bg-white p-14">
5+
<div
6+
class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-rose-300 p-8 sm:p-12"
7+
>
8+
<div
9+
class="w-full max-w-4xl rounded-md border-2 border-gray-100 bg-gray-800 p-14 shadow-lg shadow-blue-300"
10+
>
711
<div class="flex flex-col items-center">
8-
<span class="-rotate-1 rounded-lg bg-yellow-100 py-px px-2 text-sm text-yellow-800">117+ people joined this week</span>
9-
<h3 class="mt-2 max-w-2xl text-center text-2xl font-bold leading-tight sm:text-3xl md:text-4xl md:leading-tight">Want actionable SEO advice from me? Then join this newsletter</h3>
10-
<form action="" class="mx-auto mt-4 flex w-full max-w-md flex-col gap-3 sm:flex-row sm:gap-0">
11-
<input type="email" name="email" id="email" class="grow rounded border-2 border-gray-300 py-3 px-3 focus:border-emerald-500 focus:outline-none sm:rounded-l-md sm:rounded-r-none sm:border-r-0" placeholder="Email Address" />
12-
<button type="submit" class="rounded bg-emerald-500 px-5 py-4 font-bold text-white sm:rounded-l-none sm:rounded-r-md">Get First Email</button>
12+
<h3
13+
class="mt-2 mb-4 max-w-2xl text-center text-2xl font-bold leading-tight text-white sm:text-3xl md:text-4xl md:leading-tight"
14+
>
15+
Subscribe for latest newsletter
16+
</h3>
17+
<form
18+
action=""
19+
class="mx-auto mt-4 flex w-full max-w-md flex-col gap-3 sm:flex-row sm:gap-0"
20+
>
21+
<input
22+
type="email"
23+
name="email"
24+
class="grow rounded-lg border-2 border-gray-300 py-3 px-3 focus:border-red-500 focus:outline-none sm:rounded-l-md sm:rounded-r-none sm:border-r-0"
25+
placeholder="Your Email"
26+
/>
27+
<button
28+
type="submit"
29+
class="rounded bg-blue-500 px-5 py-4 font-bold text-white sm:rounded-l-none sm:rounded-r-md"
30+
>
31+
Subscribe
32+
</button>
1333
</form>
1434
</div>
1535
</div>

‎tailwind_components/contact_forms/vertical_contact_form.jsx‎

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,71 @@
1-
import { stripIndent } from "react-codepen-prefill-embed";
1+
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const contactForm = stripIndent`
4-
<div class="flex h-full w-full items-center justify-center bg-slate-800">
4+
<div class="flex h-screen w-full items-center justify-center bg-rose-300">
55
<div class="my-10 rounded-xl border border-gray-200 bg-white shadow-md">
6-
<a href="#"> </a>
76
<div class="flex flex-col items-center justify-center p-6 text-center">
8-
<a href="#"> </a>
9-
10-
<h5 class="mb-1 px-4 font-bold tracking-tight text-gray-700">Contact Us</h5>
11-
<h1 class="mb-5 text-3xl font-bold">Book Appointment</h1>
7+
<h5 class="mb-1 px-4 font-bold tracking-tight text-gray-700">
8+
Contact Us
9+
</h5>
10+
<h1 class="mb-5 text-3xl font-bold">Book your Appointment</h1>
1211
<div class="mx-10 grid justify-start">
13-
<label for="message" class="left-0 mb-2 mt-2 -ml-40 block text-sm font-medium text-gray-900">Name *</label>
14-
<input class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" id="username" type="text" placeholder="Full Name *" />
15-
<label for="message" class="left-0 mb-2 mt-2 -ml-28 block text-sm font-medium text-gray-900">Email address *</label>
16-
<input class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" id="username" type="text" placeholder="Email *" />
17-
<label for="message" class="left-0 mb-2 mt-2 -ml-32 block text-sm font-medium text-gray-900">Depertment *</label>
18-
<select class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none" aria-label="Default select example">
12+
<label
13+
for="message"
14+
class="left-0 mb-2 mt-2 -ml-40 block text-sm font-medium text-gray-900"
15+
>Name *</label
16+
>
17+
<input
18+
class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
19+
id="username"
20+
type="text"
21+
placeholder="Full Name *"
22+
/>
23+
<label
24+
for="message"
25+
class="left-0 mb-2 mt-2 -ml-28 block text-sm font-medium text-gray-900"
26+
>Email address *</label
27+
>
28+
<input
29+
class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
30+
id="username"
31+
type="text"
32+
placeholder="Email *"
33+
/>
34+
<label
35+
for="message"
36+
class="left-0 mb-2 mt-2 -ml-32 block text-sm font-medium text-gray-900"
37+
>Depertment *</label
38+
>
39+
<select
40+
class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none"
41+
aria-label="Default select example"
42+
>
1943
<option selected>Please Select</option>
2044
<option value="1">One</option>
2145
<option value="2">Two</option>
2246
<option value="3">Three</option>
2347
</select>
24-
<label for="message" class="left-0 mb-2 mt-2 -ml-40 block text-sm font-medium text-gray-900">Time *</label>
25-
<select class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none" aria-label="Default select example">
48+
<label
49+
for="message"
50+
class="left-0 mb-2 mt-2 -ml-40 block text-sm font-medium text-gray-900"
51+
>Time *</label
52+
>
53+
<select
54+
class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none"
55+
aria-label="Default select example"
56+
>
2657
<option selected>4:00 Available</option>
2758
<option value="1">One</option>
2859
<option value="2">Two</option>
2960
<option value="3">Three</option>
3061
</select>
3162
</div>
32-
<button type="button" class="mr-2 mb-2 mt-4 rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Book Appointment</button>
63+
<button
64+
type="button"
65+
class="mr-2 mb-2 mt-4 rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
66+
>
67+
Book Appointment
68+
</button>
3369
</div>
3470
</div>
3571
</div>

0 commit comments

Comments
 (0)