Repository navigation
Expand file tree
/
Copy pathPractice.html
More file actions
139 lines (123 loc) · 7.59 KB
/
Copy pathPractice.html
File metadata and controls
139 lines (123 loc) · 7.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<meta charset="utf-8">
<script src="//unpkg.com/alpinejs" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div id="header" class="text-4xl font-bold text-center py-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white">LOLLIPOP</div>
<div class="container mx-auto px-4 py-8">
<div x-data="{ showEmojis: false }" class="mb-8">
<button @click="showEmojis = !showEmojis" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Toggle Emoji Story
</button>
<div x-show="showEmojis" class="mt-4 space-y-4">
<p class="text-lg">Here is a smiley face: 😀</p>
<p class="text-lg">This is a happy face: 😁</p>
<p class="text-lg leading-relaxed">
Once upon a time 🧭 there was a boy 🤵 called Ewane. He had friends 👬 who were
popular 🕴 and wished to be like them too, so he created his own title as LOLLIPOP
which referred to him as a sweet 🍭.
</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-purple-600 rounded-lg shadow-lg p-6 text-white">
<h2 class="text-2xl font-bold mb-4">We are studying divs today</h2>
<p class="mb-4">A div is a block of container</p>
<h4 class="text-xl mb-2">Below is a sentence I just copied and pasted</h4>
<p>Here is a smiley face: 😀</p>
</div>
<div class="bg-cyan-500 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold mb-4">This is my second div</h2>
<p class="mb-4">I do this to implement a div in such a way I can understand</p>
<p class="font-bold">The content is separated from the one above</p>
</div>
<div class="bg-gray-600 rounded-lg shadow-lg p-6 text-white">
<h2 class="text-2xl font-bold mb-4">This is my third div</h2>
<p>The first is in blueviolet, the second in aqua, the third in darkgrey</p>
</div>
</div>
<div class="bg-pink-400 rounded-lg shadow-lg p-6 my-8 text-white">
<h1 class="text-3xl font-bold mb-4">My SCHOOL EXPERIENCES</h1>
<p class="leading-relaxed">
On my first day in school🏫 I was so exhausted🧬 until I forgot😓
my belongings💼 at home🏠 and to attend the class like that. But luckily😅
I met some friends👬 who helped me with their materials💻.
</p>
</div>
<div x-data="{ formData: {} }" class="space-y-8">
<form @submit.prevent="console.log(formData)" class="bg-white rounded-lg shadow-lg p-6">
<fieldset class="border rounded-lg p-4">
<legend class="text-xl font-bold px-2">Registration Form</legend>
<div class="space-y-4">
<div class="flex flex-col">
<label class="text-gray-700">Username:</label>
<input type="text" x-model="formData.username" class="mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="John Doe">
</div>
<div class="flex flex-col">
<label class="text-gray-700">Email:</label>
<input type="email" x-model="formData.email" class="mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="example@gmail.com">
</div>
<div class="flex gap-4">
<label class="inline-flex items-center">
<input type="radio" x-model="formData.gender" value="male" class="form-radio">
<span class="ml-2">Male</span>
</label>
<label class="inline-flex items-center">
<input type="radio" x-model="formData.gender" value="female" class="form-radio">
<span class="ml-2">Female</span>
</label>
</div>
<button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Submit
</button>
</div>
</fieldset>
</form>
<form @submit.prevent="console.log($event.target)" class="bg-white rounded-lg shadow-lg p-6">
<fieldset class="border rounded-lg p-4">
<legend class="text-xl font-bold px-2">Login Form</legend>
<div class="space-y-4">
<div class="flex flex-col">
<label class="text-gray-700">Email:</label>
<input type="email" required class="mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<div class="flex flex-col">
<label class="text-gray-700">Password:</label>
<input type="password" required class="mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Login
</button>
</div>
</fieldset>
</form>
<form @submit.prevent="console.log($event.target)" class="bg-white rounded-lg shadow-lg p-6">
<fieldset class="border rounded-lg p-4">
<h4 class="text-xl font-bold mb-4">Upload Form</h4>
<div class="space-y-4">
<div class="flex flex-col">
<label class="text-gray-700">Product Name</label>
<input type="text" required class="mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<div class="flex flex-col">
<label class="text-gray-700">Add Product</label>
<input type="file" required class="mt-1">
</div>
<div class="flex flex-col">
<label class="text-gray-700">Product Details</label>
<textarea class="mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" rows="4"></textarea>
</div>
<button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Submit
</button>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>