Belajar-tailwindCSS/index.html at main · AGISYA/Belajar-tailwindCSS · GitHub

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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            spacing: {
              13: "3.25rem",
            },
            fontFamily: {
              inter: ["Inter"],
            },
            colors: {
              wpu: "#bada55",
              kopi: "#c0ffee",
            },
            animation:{
              'spin-slow': 'spin 3s linear infinite',
              goyang: 'goyang 1s ease-in-out infinite',
            }
            kyframes: {
              goyang: {
                '0%, 100%': { transform: 'rotate (-3deg)'},
                '50%': { transform; 'rotate(3deg)'},
              }
            }
          },
        },
      };
    </script>
    <title>Belajar Tailwind</title>

    <style type="text/tailwindcss">
      #toggle:checked ~ label div.toggle-circle {
        @apply translate-x-3;
      }
    </style>
  </head>
  <body class="dark:bg-slate-800:">
    <h1 class="text-8xl font-bold text-center my-10">
      Mari Belajar
      <span
        class="bg-gradient-to-t from-blue-500 to-teal-400 bg-clip-text text-transparent"
        >Tailwindcss</span
      >
    </h1>
    <section class="mb-10 bg-gradient-to-r from-indigo-200 via-red-400 to bg-yellow-300">
      <h2 class="text-3xl text-center">Spacing</h2>
      <div class="m-13">Margin</div>
      <div class="py-8">Padding</div>
    </section>

    <section class="mb-10 bg-green-200">
      <h2 class="text-3xl text-center">Sizing</h2>
      <div class="w-32 h-32 bg-green-300">Kontak 1</div>
    </section>

    <section class="font-inter max-w-3xl mx-auto">
      <h2 class="mb-2 text-4xl font-bold">
        Belajar Mengenai Typography pada TailwindCSS
      </h2>
      <div class="mb-4 text-ig text-gray-500">
        By <a href="#" class="text-gray-700 font-semibold">Agisya</a>,18,juli
        2024
      </div>
      <p class="mb-4">
        Lorem ipsum dolor sit amet
        <a href="#" class="underlinebfont-semibold text-blue-600"
          >consectetur</a
        >
        adipisicing elit. A aut, dolorem beatae iure enim libero reprehenderit
        autem. Nisi sed ipsum error, ea nostrum libero facilis incidunt
        doloribus iure quia, dolore fugit necessitatibus soluta similique
        maiores mollitia rerum quo illo eum perspiciatis expedita officia
        tempora aliquam iusto. Nihil, ipsa. Suscipit, porro?
      </p>
      <blockquote class="mb-4 italic font-thin text-xl">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui sit
        provident esse debitis nemo dicta nobis, totam facere fugiat mollitia.
      </blockquote>
      <p class="mb-4">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum soluta
        tempore unde repudiandae. Corrupti quae veritatis sint. Dolorem qui non
        tempore aut repellat minus recusandae alias? Labore numquam quisquam
        totam?
      </p>
    </section>
  <div class="max-w-xl h-96 bg-[#bada55] mx-auto
    mt-[42px] overflow-y-scroll bg-scroll" style="background-image: url('./Asset/WhatsApp\ Image\ 2024-07-22\ at\ 10.17.39.jpeg')">
   <p class="p-5 text-2xl text-red-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse aliquid quisquam provident excepturi corporis et temporibus eaque voluptate. Ea, quae perspiciatis pariatur rerum, quam itaque iste voluptatibus adipisci, hic explicabo incidunt numquam natus. Consectetur totam veritatis facere exercitationem quibusdam minima corporis provident hic voluptas deserunt, consequuntur accusantium magni odit maxime nihil quidem, possimus perferendis aperiam ipsam sed suscipit id. Saepe natus optio corporis ab, veritatis sequi culpa fugit maxime temporibus nam exercitationem nihil asperiores facilis aut? Molestiae delectus aliquam, velit expedita dolore, accusantium nulla voluptates, officiis quis laboriosam harum porro! Beatae excepturi dicta eum vel illum blanditiis optio voluptatibus commodi illo deserunt repellendus fuga provident officiis sit accusantium repudiandae, est assumenda dignissimos magni sequi, eligendi cum? Perspiciatis veritatis sapiente officia autem at laborum, doloremque tempora dolorum labore commodi aspernatur incidunt, quia magnam, rem numquam. Debitis sapiente beatae ipsum assumenda quas blanditiis enim. Est expedita deleniti maxime dolore doloribus aperiam, soluta voluptatibus provident nulla. Aperiam facere dolor, voluptatibus modi inventore mollitia, cumque odit nihil, praesentium commodi veritatis quasi voluptas expedita maxime vero! Odio autem culpa possimus non molestiae ullam voluptate, illo officia cupiditate, veniam voluptatibus quibusdam laboriosam beatae voluptatum enim quo expedita, facere laudantium corrupti ducimus consequuntur quod delectus placeat mollitia!</p>
  </div>
   <div
      class="mt-32 max-w-xl mx-auto h-96 bg-slate-300 bg-contain bg-no-repeat bg-center rounded-2xl shadow-xl shadow-slate-500 overflow-hidden border-8 flex"
      style="background-image: url(./Asset/how-to-make-your-computer-faster-hero.avif)">
      <div class="w-[200px] h-[200px] bg-white/30 m-auto backdrop-blur-md rounded-full"></div>
  </div>

    <hr class="my-20"/>

    <div class="flex justify-center">
      <span class="text-sm text-slate-500
      mr-2">Light</span>
      <input type="checkbox" id="toggle"
      class="hidden"/>
      <label for="toggle">
        <div class="w-9 h-5 bg-slate-500
        rounded-full flex items-center p-1
        cursor-pointer">
        <div class="w-4 h-4 bg-white
        rounded-full toggle-circle"></div>
        </div>
      </label>
      <span class="text-sm text-slate-500
      ml-2">Dark</span>
    </div>

<button class="my-10 bg-sky-500 px-5 py-2
rounded-full text-white
font-inter block mx-auto
hover:bg-sky-600
active:bg-sky-700 focus:ring
■focus:ring-sky-300 dark:bg-slate-300 dark:text-slate-800 dark:hover:text-slate-900 dark:hover:bg-slate-100">Simpan</button>

<div class="max-w-lg my-10 border border-slate-200 rounded-xl mx-auto p-5
 shadow-md font-inter hover:bg-sky-500 group font-serif dark:hover:bg-slate-300">
 <h5 class="font-bold text-slate-700 text-lg
 mb-3 group-hover:text-white dark:group-hover:text-slate-800">My Card</h5>
 <p class="text-slate-600
  group-hover:text-white selection:bg-lime-300
   selection:text-slate-900 first-line:uppercase
 first-line:tracking-widest
 first-letter:text-7xl
 first-letter:float-left first-letter:mr-3
 dark:group-hover:text-slate-800">

  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat veniam fuga possimus mollitia, placeat minima? Nobis rerum molestiae explicabo recusandae assumenda. Voluptas repellat impedit fugiat recusandae delectus, non aperiam esse et, velit excepturi, repellendus similique harum aut officia porro quo necessitatibus inventore ipsum dolores placeat. Soluta quaerat voluptatum tenetur? Itaque aut tempora ab, assumenda magni sapiente in aliquam quaerat numquam! Cumque sit ducimus illum commodi, veritatis maiores dignissimos vitae dolore labore magnam blanditiis facilis alias, similique suscipit id laborum in, consequatur assumenda? Expedita deleniti dignissimos quia, error deserunt vel. Quidem nemo aliquam ipsa quam! Libero recusandae unde expedita amet non?</p>
</div>

<div class="max-w-lg border border-slate-200 rounded-xl mx-auto shadow-md font-inter p-5">
  <form action="">
    <label for="email" class="block">
      <span class="block font-semibold mb-1
      text-slate-700 after:content-['*']
      after:text-pink-500 after:ml-0.5">Email</span>
      <input
       type="email"
       id="email"
       placeholder="masukkan email.."
       class="px-3 py-2 border shadow rounded
       w-full block text-sm
       placeholder:text-slate-400
       focus:outline-none focus:ring-1 focus:ring-sky-500 focus: border-sky-500
       invalid:text-pink-700
       invalid:focus:ring-pink-700
       invalid:focus:border-pink-700 peer"
      />
      <p class="text-sm m-1 text-pink-700
      invisible peer-invalid:visible">Email tidak vaild</p>
   </label>
  </form>
</div>

<hr class="my-20" />

<div class="w-40 h-40 bg-sky-500 mx-auto rounded-lg shadow-lg hover:scale-125 hover:rotate-45 hover:bg-pink-500 transition
origin-top-left"></div>

<div class="w-40 h-40 mx-auto mt-20 group">

<div class="w-full h-full bg-sky-500 rounded-lg shadow-lg group-hover:rotate-180 origin-top-left transition duration-1000 delay-1000"></div>
</div>

<div class="w-40 h-40 bg-pink-500 mx-auto
rounded-lg shadow-lg mt-20 animate-goyang"></div>

<hr class="my-20 border-t-4"/>

<div class="container mx-auto">
  <div class="border rounded-lg shadow-lg p-10">
    <div class="w-10 h-10 bg-sky-200 rounded-full flex fixed bottom-5 right-5 cursor-pointer"><a href="#" class="text-xl m-auto">🔝</a></div>
    <img src="Asset/computer-run-faster.webp" alt="laptpo" width="150" class="float-left mr-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium numquam beatae quo aliquid, quisquam excepturi itaque cumque distinctio tempora repellat dolores facilis amet rerum quidem dolor sint velit illum laborum suscipit necessitatibus ipsa voluptatibus? Iusto sit dolores enim, possimus soluta vitae et cum optio beatae quo? Natus illo ut magni!</p></div>
</div>

<div class="container mx-auto border rounded-lg shadow-lg shadow-ig p-5 mt-10 columns-3">
  <img src="./Asset/computer-run-faster.webp" alt="Image"class="mb-4">
  <img src="./Asset/computer-run-faster.webp" alt="Image"class="mb-4">
  <img src="./Asset/computer-run-faster.webp" alt="Image"class="mb-4">
  <img src="./Asset/computer-run-faster.webp" alt="Image"class="mb-4">
  <img src="./Asset/computer-run-faster.webp" alt="Image"class="mb-4">
  <img src="./Asset/computer-run-faster.webp" alt="Image"class="mb-4"></div>

  <hr class="mt-24 border-t-4"/>
<div>

<div class="container  font-inter max-w-md mx-auto sm:max-w-xl md:max-w-5xl lg:flex lg:max-w-full lg:p-0">
      <div class="lg:p-12 lg:flex-1">
        <h3 class="text-4xl font-bold text-slate-800 sm:text-5xl md:text-6xl">Ab<span class="text-sky-500">di</span>agisya</h3>
        <img src="./Asset/computer-run-faster.webp" alt="Laptop" class="mt-4 rounded-xl shadow-xl sm:mt-6 sm:h-64 sm:w-full sm:object-cover sm:object-center lg:hidden"/>
        <h2 class="mt-6 text-2xl font-semibold text-slate-800 sm:mt-8 sm:text-4xl">Mari Belajar Programming Bersama WPU</h2>
        <P class="mt-2 text-slate-600 sm:mt-4 sm:text-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab incidunt totam sit impedit architecto suscipit quam obcaecati perspiciatis eum, ad atque corporis cupiditate officiis cumque dignissimos deserunt quos, amet maxime fugit? Quos hic tenetur et. Doloribus enim voluptates facere animi?</P>
        <button class="bg-red-500 text-white px-3 py-2 rounded-lg mt-5">Subscribe Channel Youtube</button>
      </div>

      <div class="hidden lg:flex  lg:w-1/2 ">
          <img src="./Asset/computer-run-faster.webp" alt="Laptop" class="object-cover rounded-l-full">
      </div>

</div>

 <h2 class="mt-24 mb-10 text-center font-bold text-3xl text-slate-700">my galeri</h2>

 <div>
  <div class="container mx-auto px-6 font-inter flex flex-wrap sm:gap-6 sm:justify-center">
    <div class="rounded-md shadow-lg overflow-hidden mb-10 bg-white sm:mb-0  sm:w-64 md:w-80 lg:w-72 ">
      <img src="./Asset/WhatsApp Image 2024-07-22 at 10.17.40 (2).jpeg" alt="Image caption"
      class="w-full">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-slate-700">Image Title </div>
        <p class="text-sm text-slate-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum eius ea ex illum. Voluptates atque distinctio quod culpa consequuntur voluptas aliquid soluta laboriosam assumenda dolorum incidunt, magnam saepe suscipit officia blanditiis, maiores repellat corrupti aspernatur!!</p>
      </div>
    </div>
    <div class="rounded-md shadow-lg overflow-hidden mb-10  bg-white sm:mb-0 sm:w-64 md:w-80 lg:w-72">
      <img src="./Asset/WhatsApp Image 2024-07-22 at 10.17.39.jpeg" alt="Image caption"
      class="w-full">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-slate-700">Image Title </div>
        <p class="text-sm text-slate-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis, nobis!</p>
      </div>
    </div>
    <div class="rounded-md shadow-lg overflow-hidden mb-10  bg-white sm:mb-0 sm:w-64 md:w-80 lg:w-72">
      <img src="./Asset/WhatsApp Image 2024-07-22 at 10.16.11 (1).jpeg" alt="Image caption"
      class="w-full">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-slate-700">Image Title </div>
        <p class="text-sm text-slate-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis, nobis!</p>
      </div>
    </div>
    <div class="rounded-md shadow-lg overflow-hidden mb-10 bg-white sm:mb-0 sm:w-64 md:w-80 lg:w-72 ">
      <img src="./Asset/WhatsApp Image 2024-07-22 at 10.17.40.jpeg" alt="Image caption"
      class="w-full">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-slate-700">Image Title </div>
        <p class="text-sm text-slate-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis, nobis!</p>
      </div>
    </div>
    <div class="rounded-md shadow-lg overflow-hidden mb-10 bg-white sm:mb-0 sm:w-64 md:w-80 lg:w-72 ">
      <img src="./Asset/WhatsApp Image 2024-07-22 at 10.17.40 (1).jpeg" alt="Image caption"
      class="w-full">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-slate-700">Image Title </div>
        <p class="text-sm text-slate-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio dolor, doloremque, fugiat tempore in exercitationem, omnis aliquid est modi pariatur consectetur quam. Tempora tempore ipsam consectetur officiis, fuga ea? Atque consequatur aliquam sint eius. Veritatis!</p>
      </div>
    </div>
   </div>
 </div>

<div class="mt-64 p-2 font-inter grid grid-cols-2 gap-2 md:grid-cols-4 md:gap-4 md:p-4">
  <h2 class="h-15 text-xl font-seminold text-slate-700 md:col-start-4 md:row-start-2 md:flex"><span class="self-center">Welcome To WPU</h2></span>
  <div class="h-15 text-lg font-bold text-slate-600 md:col-start-2 md:row-start-2 md:flex"><span class="self-end">@Abdiagisya</div></span>

 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3] overflow-hidden group">
  <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3] md:col-start-3">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3]">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3]">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3]">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3] md:col-start-2">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3] md:col-start-4">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3]">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3] md:col-start-3">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>
 <div class="h-15 bg-blue-500 aspect-[4/3] rounded-lg md:aspect-[3/4] xl:aspect-[4/3] md:col-start-3">
    <div class="w-full h-full bg-[url(Asset/computer-run-faster.webp)] bg-cover bg-center"> </div>
 </div>

</div>


    <div class="mb-96"></div>

    <script>
      const checkbox = document.querySelector
      ('#toggle');
      const html = document.querySelector ('html');

      checkbox.addEventListener('click',
    function () {
      checkbox.checked ? html.classList.add
      ('dark') : html.classList.remove
      ('dark');
     });

    </script>
  </body>
</html>