├── index.js
├── README.md
├── index.html
└── output.css
/index.js:
--------------------------------------------------------------------------------
1 |
2 | display=(value)=>
3 | {
4 | document.getElementById("result").value+=value;
5 | }
6 |
7 | calculate=()=>
8 | {
9 | var p = document.getElementById("result").value;
10 | var q=eval(p);
11 | document.getElementById("result").value=q
12 | }
13 |
14 | clear=()=>{
15 |
16 | document.getElementById("result").value="";
17 | }
18 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JS_Calculator
2 | a simple calculator built using html , css(tailwindCSS) and javascript
3 |
4 |
5 | This simple Calculator can perform all basic arithmetic operations and the buttons are animated to hover and box shadows have been over the calculator body and display
6 |
7 |
8 | 
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/output.css:
--------------------------------------------------------------------------------
1 | /*
2 | ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
3 | */
4 |
5 | /*
6 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8 | */
9 |
10 | *,
11 | ::before,
12 | ::after {
13 | box-sizing: border-box;
14 | /* 1 */
15 | border-width: 0;
16 | /* 2 */
17 | border-style: solid;
18 | /* 2 */
19 | border-color: #e5e7eb;
20 | /* 2 */
21 | }
22 |
23 | ::before,
24 | ::after {
25 | --tw-content: '';
26 | }
27 |
28 | /*
29 | 1. Use a consistent sensible line-height in all browsers.
30 | 2. Prevent adjustments of font size after orientation changes in iOS.
31 | 3. Use a more readable tab size.
32 | 4. Use the user's configured `sans` font-family by default.
33 | 5. Use the user's configured `sans` font-feature-settings by default.
34 | */
35 |
36 | html {
37 | line-height: 1.5;
38 | /* 1 */
39 | -webkit-text-size-adjust: 100%;
40 | /* 2 */
41 | -moz-tab-size: 4;
42 | /* 3 */
43 | -o-tab-size: 4;
44 | tab-size: 4;
45 | /* 3 */
46 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
47 | /* 4 */
48 | font-feature-settings: normal;
49 | /* 5 */
50 | }
51 |
52 | /*
53 | 1. Remove the margin in all browsers.
54 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
55 | */
56 |
57 | body {
58 | margin: 0;
59 | /* 1 */
60 | line-height: inherit;
61 | /* 2 */
62 | }
63 |
64 | /*
65 | 1. Add the correct height in Firefox.
66 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
67 | 3. Ensure horizontal rules are visible by default.
68 | */
69 |
70 | hr {
71 | height: 0;
72 | /* 1 */
73 | color: inherit;
74 | /* 2 */
75 | border-top-width: 1px;
76 | /* 3 */
77 | }
78 |
79 | /*
80 | Add the correct text decoration in Chrome, Edge, and Safari.
81 | */
82 |
83 | abbr:where([title]) {
84 | -webkit-text-decoration: underline dotted;
85 | text-decoration: underline dotted;
86 | }
87 |
88 | /*
89 | Remove the default font size and weight for headings.
90 | */
91 |
92 | h1,
93 | h2,
94 | h3,
95 | h4,
96 | h5,
97 | h6 {
98 | font-size: inherit;
99 | font-weight: inherit;
100 | }
101 |
102 | /*
103 | Reset links to optimize for opt-in styling instead of opt-out.
104 | */
105 |
106 | a {
107 | color: inherit;
108 | text-decoration: inherit;
109 | }
110 |
111 | /*
112 | Add the correct font weight in Edge and Safari.
113 | */
114 |
115 | b,
116 | strong {
117 | font-weight: bolder;
118 | }
119 |
120 | /*
121 | 1. Use the user's configured `mono` font family by default.
122 | 2. Correct the odd `em` font sizing in all browsers.
123 | */
124 |
125 | code,
126 | kbd,
127 | samp,
128 | pre {
129 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
130 | /* 1 */
131 | font-size: 1em;
132 | /* 2 */
133 | }
134 |
135 | /*
136 | Add the correct font size in all browsers.
137 | */
138 |
139 | small {
140 | font-size: 80%;
141 | }
142 |
143 | /*
144 | Prevent `sub` and `sup` elements from affecting the line height in all browsers.
145 | */
146 |
147 | sub,
148 | sup {
149 | font-size: 75%;
150 | line-height: 0;
151 | position: relative;
152 | vertical-align: baseline;
153 | }
154 |
155 | sub {
156 | bottom: -0.25em;
157 | }
158 |
159 | sup {
160 | top: -0.5em;
161 | }
162 |
163 | /*
164 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
165 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
166 | 3. Remove gaps between table borders by default.
167 | */
168 |
169 | table {
170 | text-indent: 0;
171 | /* 1 */
172 | border-color: inherit;
173 | /* 2 */
174 | border-collapse: collapse;
175 | /* 3 */
176 | }
177 |
178 | /*
179 | 1. Change the font styles in all browsers.
180 | 2. Remove the margin in Firefox and Safari.
181 | 3. Remove default padding in all browsers.
182 | */
183 |
184 | button,
185 | input,
186 | optgroup,
187 | select,
188 | textarea {
189 | font-family: inherit;
190 | /* 1 */
191 | font-size: 100%;
192 | /* 1 */
193 | font-weight: inherit;
194 | /* 1 */
195 | line-height: inherit;
196 | /* 1 */
197 | color: inherit;
198 | /* 1 */
199 | margin: 0;
200 | /* 2 */
201 | padding: 0;
202 | /* 3 */
203 | }
204 |
205 | /*
206 | Remove the inheritance of text transform in Edge and Firefox.
207 | */
208 |
209 | button,
210 | select {
211 | text-transform: none;
212 | }
213 |
214 | /*
215 | 1. Correct the inability to style clickable types in iOS and Safari.
216 | 2. Remove default button styles.
217 | */
218 |
219 | button,
220 | [type='button'],
221 | [type='reset'],
222 | [type='submit'] {
223 | -webkit-appearance: button;
224 | /* 1 */
225 | background-color: transparent;
226 | /* 2 */
227 | background-image: none;
228 | /* 2 */
229 | }
230 |
231 | /*
232 | Use the modern Firefox focus style for all focusable elements.
233 | */
234 |
235 | :-moz-focusring {
236 | outline: auto;
237 | }
238 |
239 | /*
240 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
241 | */
242 |
243 | :-moz-ui-invalid {
244 | box-shadow: none;
245 | }
246 |
247 | /*
248 | Add the correct vertical alignment in Chrome and Firefox.
249 | */
250 |
251 | progress {
252 | vertical-align: baseline;
253 | }
254 |
255 | /*
256 | Correct the cursor style of increment and decrement buttons in Safari.
257 | */
258 |
259 | ::-webkit-inner-spin-button,
260 | ::-webkit-outer-spin-button {
261 | height: auto;
262 | }
263 |
264 | /*
265 | 1. Correct the odd appearance in Chrome and Safari.
266 | 2. Correct the outline style in Safari.
267 | */
268 |
269 | [type='search'] {
270 | -webkit-appearance: textfield;
271 | /* 1 */
272 | outline-offset: -2px;
273 | /* 2 */
274 | }
275 |
276 | /*
277 | Remove the inner padding in Chrome and Safari on macOS.
278 | */
279 |
280 | ::-webkit-search-decoration {
281 | -webkit-appearance: none;
282 | }
283 |
284 | /*
285 | 1. Correct the inability to style clickable types in iOS and Safari.
286 | 2. Change font properties to `inherit` in Safari.
287 | */
288 |
289 | ::-webkit-file-upload-button {
290 | -webkit-appearance: button;
291 | /* 1 */
292 | font: inherit;
293 | /* 2 */
294 | }
295 |
296 | /*
297 | Add the correct display in Chrome and Safari.
298 | */
299 |
300 | summary {
301 | display: list-item;
302 | }
303 |
304 | /*
305 | Removes the default spacing and border for appropriate elements.
306 | */
307 |
308 | blockquote,
309 | dl,
310 | dd,
311 | h1,
312 | h2,
313 | h3,
314 | h4,
315 | h5,
316 | h6,
317 | hr,
318 | figure,
319 | p,
320 | pre {
321 | margin: 0;
322 | }
323 |
324 | fieldset {
325 | margin: 0;
326 | padding: 0;
327 | }
328 |
329 | legend {
330 | padding: 0;
331 | }
332 |
333 | ol,
334 | ul,
335 | menu {
336 | list-style: none;
337 | margin: 0;
338 | padding: 0;
339 | }
340 |
341 | /*
342 | Prevent resizing textareas horizontally by default.
343 | */
344 |
345 | textarea {
346 | resize: vertical;
347 | }
348 |
349 | /*
350 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
351 | 2. Set the default placeholder color to the user's configured gray 400 color.
352 | */
353 |
354 | input::-moz-placeholder, textarea::-moz-placeholder {
355 | opacity: 1;
356 | /* 1 */
357 | color: #9ca3af;
358 | /* 2 */
359 | }
360 |
361 | input::placeholder,
362 | textarea::placeholder {
363 | opacity: 1;
364 | /* 1 */
365 | color: #9ca3af;
366 | /* 2 */
367 | }
368 |
369 | /*
370 | Set the default cursor for buttons.
371 | */
372 |
373 | button,
374 | [role="button"] {
375 | cursor: pointer;
376 | }
377 |
378 | /*
379 | Make sure disabled buttons don't get the pointer cursor.
380 | */
381 |
382 | :disabled {
383 | cursor: default;
384 | }
385 |
386 | /*
387 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
388 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
389 | This can trigger a poorly considered lint error in some tools but is included by design.
390 | */
391 |
392 | img,
393 | svg,
394 | video,
395 | canvas,
396 | audio,
397 | iframe,
398 | embed,
399 | object {
400 | display: block;
401 | /* 1 */
402 | vertical-align: middle;
403 | /* 2 */
404 | }
405 |
406 | /*
407 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
408 | */
409 |
410 | img,
411 | video {
412 | max-width: 100%;
413 | height: auto;
414 | }
415 |
416 | /* Make elements with the HTML hidden attribute stay hidden by default */
417 |
418 | [hidden] {
419 | display: none;
420 | }
421 |
422 | *, ::before, ::after {
423 | --tw-border-spacing-x: 0;
424 | --tw-border-spacing-y: 0;
425 | --tw-translate-x: 0;
426 | --tw-translate-y: 0;
427 | --tw-rotate: 0;
428 | --tw-skew-x: 0;
429 | --tw-skew-y: 0;
430 | --tw-scale-x: 1;
431 | --tw-scale-y: 1;
432 | --tw-pan-x: ;
433 | --tw-pan-y: ;
434 | --tw-pinch-zoom: ;
435 | --tw-scroll-snap-strictness: proximity;
436 | --tw-ordinal: ;
437 | --tw-slashed-zero: ;
438 | --tw-numeric-figure: ;
439 | --tw-numeric-spacing: ;
440 | --tw-numeric-fraction: ;
441 | --tw-ring-inset: ;
442 | --tw-ring-offset-width: 0px;
443 | --tw-ring-offset-color: #fff;
444 | --tw-ring-color: rgb(59 130 246 / 0.5);
445 | --tw-ring-offset-shadow: 0 0 #0000;
446 | --tw-ring-shadow: 0 0 #0000;
447 | --tw-shadow: 0 0 #0000;
448 | --tw-shadow-colored: 0 0 #0000;
449 | --tw-blur: ;
450 | --tw-brightness: ;
451 | --tw-contrast: ;
452 | --tw-grayscale: ;
453 | --tw-hue-rotate: ;
454 | --tw-invert: ;
455 | --tw-saturate: ;
456 | --tw-sepia: ;
457 | --tw-drop-shadow: ;
458 | --tw-backdrop-blur: ;
459 | --tw-backdrop-brightness: ;
460 | --tw-backdrop-contrast: ;
461 | --tw-backdrop-grayscale: ;
462 | --tw-backdrop-hue-rotate: ;
463 | --tw-backdrop-invert: ;
464 | --tw-backdrop-opacity: ;
465 | --tw-backdrop-saturate: ;
466 | --tw-backdrop-sepia: ;
467 | }
468 |
469 | ::backdrop {
470 | --tw-border-spacing-x: 0;
471 | --tw-border-spacing-y: 0;
472 | --tw-translate-x: 0;
473 | --tw-translate-y: 0;
474 | --tw-rotate: 0;
475 | --tw-skew-x: 0;
476 | --tw-skew-y: 0;
477 | --tw-scale-x: 1;
478 | --tw-scale-y: 1;
479 | --tw-pan-x: ;
480 | --tw-pan-y: ;
481 | --tw-pinch-zoom: ;
482 | --tw-scroll-snap-strictness: proximity;
483 | --tw-ordinal: ;
484 | --tw-slashed-zero: ;
485 | --tw-numeric-figure: ;
486 | --tw-numeric-spacing: ;
487 | --tw-numeric-fraction: ;
488 | --tw-ring-inset: ;
489 | --tw-ring-offset-width: 0px;
490 | --tw-ring-offset-color: #fff;
491 | --tw-ring-color: rgb(59 130 246 / 0.5);
492 | --tw-ring-offset-shadow: 0 0 #0000;
493 | --tw-ring-shadow: 0 0 #0000;
494 | --tw-shadow: 0 0 #0000;
495 | --tw-shadow-colored: 0 0 #0000;
496 | --tw-blur: ;
497 | --tw-brightness: ;
498 | --tw-contrast: ;
499 | --tw-grayscale: ;
500 | --tw-hue-rotate: ;
501 | --tw-invert: ;
502 | --tw-saturate: ;
503 | --tw-sepia: ;
504 | --tw-drop-shadow: ;
505 | --tw-backdrop-blur: ;
506 | --tw-backdrop-brightness: ;
507 | --tw-backdrop-contrast: ;
508 | --tw-backdrop-grayscale: ;
509 | --tw-backdrop-hue-rotate: ;
510 | --tw-backdrop-invert: ;
511 | --tw-backdrop-opacity: ;
512 | --tw-backdrop-saturate: ;
513 | --tw-backdrop-sepia: ;
514 | }
515 |
516 | .ml-auto {
517 | margin-left: auto;
518 | }
519 |
520 | .mr-auto {
521 | margin-right: auto;
522 | }
523 |
524 | .mt-\[50px\] {
525 | margin-top: 50px;
526 | }
527 |
528 | .mt-\[20px\] {
529 | margin-top: 20px;
530 | }
531 |
532 | .mt-2 {
533 | margin-top: 0.5rem;
534 | }
535 |
536 | .mt-\[\] {
537 | margin-top: ;
538 | }
539 |
540 | .mt-\[-10px\] {
541 | margin-top: -10px;
542 | }
543 |
544 | .mt-\[-\] {
545 | margin-top: -;
546 | }
547 |
548 | .mt-\[-50px\] {
549 | margin-top: -50px;
550 | }
551 |
552 | .mt-\[-55px\] {
553 | margin-top: -55px;
554 | }
555 |
556 | .mt-\[-58px\] {
557 | margin-top: -58px;
558 | }
559 |
560 | .mt-\[-60px\] {
561 | margin-top: -60px;
562 | }
563 |
564 | .mt-\[-70px\] {
565 | margin-top: -70px;
566 | }
567 |
568 | .mt-\[-40px\] {
569 | margin-top: -40px;
570 | }
571 |
572 | .mt-\[-30px\] {
573 | margin-top: -30px;
574 | }
575 |
576 | .mt-\[30px\] {
577 | margin-top: 30px;
578 | }
579 |
580 | .mt-\[-20px\] {
581 | margin-top: -20px;
582 | }
583 |
584 | .mr-10 {
585 | margin-right: 2.5rem;
586 | }
587 |
588 | .mr-\[\] {
589 | margin-right: ;
590 | }
591 |
592 | .mr-\[50px\] {
593 | margin-right: 50px;
594 | }
595 |
596 | .mr-\[80px\] {
597 | margin-right: 80px;
598 | }
599 |
600 | .mr-\[100px\] {
601 | margin-right: 100px;
602 | }
603 |
604 | .mr-\[120px\] {
605 | margin-right: 120px;
606 | }
607 |
608 | .mt-1 {
609 | margin-top: 0.25rem;
610 | }
611 |
612 | .mt-\[-1\=px\] {
613 | margin-top: -1=px;
614 | }
615 |
616 | .mt-4 {
617 | margin-top: 1rem;
618 | }
619 |
620 | .mr-\[800px\] {
621 | margin-right: 800px;
622 | }
623 |
624 | .mr-\[90px\] {
625 | margin-right: 90px;
626 | }
627 |
628 | .flex {
629 | display: flex;
630 | }
631 |
632 | .h-\[650px\] {
633 | height: 650px;
634 | }
635 |
636 | .h-\[150px\] {
637 | height: 150px;
638 | }
639 |
640 | .h-\[400px\] {
641 | height: 400px;
642 | }
643 |
644 | .h-\[\] {
645 | height: ;
646 | }
647 |
648 | .h-\[20px\] {
649 | height: 20px;
650 | }
651 |
652 | .h-\[100px\] {
653 | height: 100px;
654 | }
655 |
656 | .h-\[88px\] {
657 | height: 88px;
658 | }
659 |
660 | .h-\[58px\] {
661 | height: 58px;
662 | }
663 |
664 | .h-\[50px\] {
665 | height: 50px;
666 | }
667 |
668 | .h-\[60px\] {
669 | height: 60px;
670 | }
671 |
672 | .h-\[500px\] {
673 | height: 500px;
674 | }
675 |
676 | .h-\[00px\] {
677 | height: 00px;
678 | }
679 |
680 | .h-\[459px\] {
681 | height: 459px;
682 | }
683 |
684 | .h-\[70px\] {
685 | height: 70px;
686 | }
687 |
688 | .w-\[500px\] {
689 | width: 500px;
690 | }
691 |
692 | .w-\[400px\] {
693 | width: 400px;
694 | }
695 |
696 | .w-\[\] {
697 | width: ;
698 | }
699 |
700 | .w-\[30px\] {
701 | width: 30px;
702 | }
703 |
704 | .w-\[100\] {
705 | width: 100;
706 | }
707 |
708 | .w-\[100\%\] {
709 | width: 100%;
710 | }
711 |
712 | .w-\[50px\] {
713 | width: 50px;
714 | }
715 |
716 | .w-\[60px\] {
717 | width: 60px;
718 | }
719 |
720 | .w-\[70px\] {
721 | width: 70px;
722 | }
723 |
724 | .w-\[80px\] {
725 | width: 80px;
726 | }
727 |
728 | .translate-x-2 {
729 | --tw-translate-x: 0.5rem;
730 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
731 | }
732 |
733 | .translate-x-\[\] {
734 | --tw-translate-x: ;
735 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
736 | }
737 |
738 | .translate-x-\[30px\] {
739 | --tw-translate-x: 30px;
740 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
741 | }
742 |
743 | .translate-y-1 {
744 | --tw-translate-y: 0.25rem;
745 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
746 | }
747 |
748 | .translate-y-8 {
749 | --tw-translate-y: 2rem;
750 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
751 | }
752 |
753 | .cursor-grab {
754 | cursor: grab;
755 | }
756 |
757 | .cursor-progress {
758 | cursor: progress;
759 | }
760 |
761 | .cursor-pointer {
762 | cursor: pointer;
763 | }
764 |
765 | .flex-row {
766 | flex-direction: row;
767 | }
768 |
769 | .flex-wrap {
770 | flex-wrap: wrap;
771 | }
772 |
773 | .flex-wrap-reverse {
774 | flex-wrap: wrap-reverse;
775 | }
776 |
777 | .flex-nowrap {
778 | flex-wrap: nowrap;
779 | }
780 |
781 | .justify-end {
782 | justify-content: flex-end;
783 | }
784 |
785 | .justify-around {
786 | justify-content: space-around;
787 | }
788 |
789 | .rounded-md {
790 | border-radius: 0.375rem;
791 | }
792 |
793 | .rounded-lg {
794 | border-radius: 0.5rem;
795 | }
796 |
797 | .rounded-sm {
798 | border-radius: 0.125rem;
799 | }
800 |
801 | .rounded-\[\] {
802 | border-radius: ;
803 | }
804 |
805 | .rounded-\[20px\] {
806 | border-radius: 20px;
807 | }
808 |
809 | .rounded-\[10px\] {
810 | border-radius: 10px;
811 | }
812 |
813 | .border-2 {
814 | border-width: 2px;
815 | }
816 |
817 | .border {
818 | border-width: 1px;
819 | }
820 |
821 | .border-b-4 {
822 | border-bottom-width: 4px;
823 | }
824 |
825 | .border-r-4 {
826 | border-right-width: 4px;
827 | }
828 |
829 | .border-black {
830 | --tw-border-opacity: 1;
831 | border-color: rgb(0 0 0 / var(--tw-border-opacity));
832 | }
833 |
834 | .border-white {
835 | --tw-border-opacity: 1;
836 | border-color: rgb(255 255 255 / var(--tw-border-opacity));
837 | }
838 |
839 | .border-red-500 {
840 | --tw-border-opacity: 1;
841 | border-color: rgb(239 68 68 / var(--tw-border-opacity));
842 | }
843 |
844 | .border-red-200 {
845 | --tw-border-opacity: 1;
846 | border-color: rgb(254 202 202 / var(--tw-border-opacity));
847 | }
848 |
849 | .bg-yellow-300 {
850 | --tw-bg-opacity: 1;
851 | background-color: rgb(253 224 71 / var(--tw-bg-opacity));
852 | }
853 |
854 | .bg-white {
855 | --tw-bg-opacity: 1;
856 | background-color: rgb(255 255 255 / var(--tw-bg-opacity));
857 | }
858 |
859 | .bg-green-300 {
860 | --tw-bg-opacity: 1;
861 | background-color: rgb(134 239 172 / var(--tw-bg-opacity));
862 | }
863 |
864 | .bg-slate-500 {
865 | --tw-bg-opacity: 1;
866 | background-color: rgb(100 116 139 / var(--tw-bg-opacity));
867 | }
868 |
869 | .bg-black {
870 | --tw-bg-opacity: 1;
871 | background-color: rgb(0 0 0 / var(--tw-bg-opacity));
872 | }
873 |
874 | .bg-slate-100 {
875 | --tw-bg-opacity: 1;
876 | background-color: rgb(241 245 249 / var(--tw-bg-opacity));
877 | }
878 |
879 | .bg-slate-200 {
880 | --tw-bg-opacity: 1;
881 | background-color: rgb(226 232 240 / var(--tw-bg-opacity));
882 | }
883 |
884 | .bg-slate-400 {
885 | --tw-bg-opacity: 1;
886 | background-color: rgb(148 163 184 / var(--tw-bg-opacity));
887 | }
888 |
889 | .bg-cyan-300 {
890 | --tw-bg-opacity: 1;
891 | background-color: rgb(103 232 249 / var(--tw-bg-opacity));
892 | }
893 |
894 | .bg-green-100 {
895 | --tw-bg-opacity: 1;
896 | background-color: rgb(220 252 231 / var(--tw-bg-opacity));
897 | }
898 |
899 | .bg-gray-700 {
900 | --tw-bg-opacity: 1;
901 | background-color: rgb(55 65 81 / var(--tw-bg-opacity));
902 | }
903 |
904 | .bg-slate-600 {
905 | --tw-bg-opacity: 1;
906 | background-color: rgb(71 85 105 / var(--tw-bg-opacity));
907 | }
908 |
909 | .bg-orange-500 {
910 | --tw-bg-opacity: 1;
911 | background-color: rgb(249 115 22 / var(--tw-bg-opacity));
912 | }
913 |
914 | .bg-orange-100 {
915 | --tw-bg-opacity: 1;
916 | background-color: rgb(255 237 213 / var(--tw-bg-opacity));
917 | }
918 |
919 | .bg-gray-600 {
920 | --tw-bg-opacity: 1;
921 | background-color: rgb(75 85 99 / var(--tw-bg-opacity));
922 | }
923 |
924 | .bg-gray-800 {
925 | --tw-bg-opacity: 1;
926 | background-color: rgb(31 41 55 / var(--tw-bg-opacity));
927 | }
928 |
929 | .bg-gray-400 {
930 | --tw-bg-opacity: 1;
931 | background-color: rgb(156 163 175 / var(--tw-bg-opacity));
932 | }
933 |
934 | .bg-red-800 {
935 | --tw-bg-opacity: 1;
936 | background-color: rgb(153 27 27 / var(--tw-bg-opacity));
937 | }
938 |
939 | .bg-gradient-to-b {
940 | background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
941 | }
942 |
943 | .bg-gradient-to-tr {
944 | background-image: linear-gradient(to top right, var(--tw-gradient-stops));
945 | }
946 |
947 | .from-black {
948 | --tw-gradient-from: #000;
949 | --tw-gradient-to: rgb(0 0 0 / 0);
950 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
951 | }
952 |
953 | .from-gray-200 {
954 | --tw-gradient-from: #e5e7eb;
955 | --tw-gradient-to: rgb(229 231 235 / 0);
956 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
957 | }
958 |
959 | .from-yellow-100 {
960 | --tw-gradient-from: #fef9c3;
961 | --tw-gradient-to: rgb(254 249 195 / 0);
962 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
963 | }
964 |
965 | .from-gray-800 {
966 | --tw-gradient-from: #1f2937;
967 | --tw-gradient-to: rgb(31 41 55 / 0);
968 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
969 | }
970 |
971 | .from-red-700 {
972 | --tw-gradient-from: #b91c1c;
973 | --tw-gradient-to: rgb(185 28 28 / 0);
974 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
975 | }
976 |
977 | .from-red-800 {
978 | --tw-gradient-from: #991b1b;
979 | --tw-gradient-to: rgb(153 27 27 / 0);
980 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
981 | }
982 |
983 | .to-blue-400 {
984 | --tw-gradient-to: #60a5fa;
985 | }
986 |
987 | .to-black {
988 | --tw-gradient-to: #000;
989 | }
990 |
991 | .to-gray-500 {
992 | --tw-gradient-to: #6b7280;
993 | }
994 |
995 | .to-gray-600 {
996 | --tw-gradient-to: #4b5563;
997 | }
998 |
999 | .to-pink-50 {
1000 | --tw-gradient-to: #fdf2f8;
1001 | }
1002 |
1003 | .to-pink-500 {
1004 | --tw-gradient-to: #ec4899;
1005 | }
1006 |
1007 | .to-gray-900 {
1008 | --tw-gradient-to: #111827;
1009 | }
1010 |
1011 | .to-red-900 {
1012 | --tw-gradient-to: #7f1d1d;
1013 | }
1014 |
1015 | .to-red-600 {
1016 | --tw-gradient-to: #dc2626;
1017 | }
1018 |
1019 | .text-left {
1020 | text-align: left;
1021 | }
1022 |
1023 | .text-center {
1024 | text-align: center;
1025 | }
1026 |
1027 | .text-end {
1028 | text-align: end;
1029 | }
1030 |
1031 | .font-mono {
1032 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1033 | }
1034 |
1035 | .text-4xl {
1036 | font-size: 2.25rem;
1037 | line-height: 2.5rem;
1038 | }
1039 |
1040 | .text-white {
1041 | --tw-text-opacity: 1;
1042 | color: rgb(255 255 255 / var(--tw-text-opacity));
1043 | }
1044 |
1045 | .opacity-5 {
1046 | opacity: 0.05;
1047 | }
1048 |
1049 | .opacity-20 {
1050 | opacity: 0.2;
1051 | }
1052 |
1053 | .opacity-10 {
1054 | opacity: 0.1;
1055 | }
1056 |
1057 | .shadow {
1058 | --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1059 | --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1060 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1061 | }
1062 |
1063 | .shadow-sm {
1064 | --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1065 | --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1066 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1067 | }
1068 |
1069 | .shadow-lg {
1070 | --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1071 | --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1072 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1073 | }
1074 |
1075 | .shadow-2xl {
1076 | --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1077 | --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1078 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1079 | }
1080 |
1081 | .shadow-inner {
1082 | --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
1083 | --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
1084 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1085 | }
1086 |
1087 | .shadow-orange-800 {
1088 | --tw-shadow-color: #9a3412;
1089 | --tw-shadow: var(--tw-shadow-colored);
1090 | }
1091 |
1092 | .shadow-yellow-900 {
1093 | --tw-shadow-color: #713f12;
1094 | --tw-shadow: var(--tw-shadow-colored);
1095 | }
1096 |
1097 | .shadow-white {
1098 | --tw-shadow-color: #fff;
1099 | --tw-shadow: var(--tw-shadow-colored);
1100 | }
1101 |
1102 | .shadow-red-500 {
1103 | --tw-shadow-color: #ef4444;
1104 | --tw-shadow: var(--tw-shadow-colored);
1105 | }
1106 |
1107 | .shadow-red-700 {
1108 | --tw-shadow-color: #b91c1c;
1109 | --tw-shadow: var(--tw-shadow-colored);
1110 | }
1111 |
1112 | .shadow-black {
1113 | --tw-shadow-color: #000;
1114 | --tw-shadow: var(--tw-shadow-colored);
1115 | }
1116 |
1117 | .delay-75 {
1118 | transition-delay: 75ms;
1119 | }
1120 |
1121 | .delay-\[\] {
1122 | transition-delay: ;
1123 | }
1124 |
1125 | .delay-\[100\] {
1126 | transition-delay: 100;
1127 | }
1128 |
1129 | .delay-\[100ms\] {
1130 | transition-delay: 100ms;
1131 | }
1132 |
1133 | .delay-\[500ms\] {
1134 | transition-delay: 500ms;
1135 | }
1136 |
1137 | .hover\:translate-x-6:hover {
1138 | --tw-translate-x: 1.5rem;
1139 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1140 | }
1141 |
1142 | .hover\:translate-x-1:hover {
1143 | --tw-translate-x: 0.25rem;
1144 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1145 | }
1146 |
1147 | .hover\:border-opacity-25:hover {
1148 | --tw-border-opacity: 0.25;
1149 | }
1150 |
1151 | .hover\:bg-slate-500:hover {
1152 | --tw-bg-opacity: 1;
1153 | background-color: rgb(100 116 139 / var(--tw-bg-opacity));
1154 | }
1155 |
1156 | .hover\:bg-slate-400:hover {
1157 | --tw-bg-opacity: 1;
1158 | background-color: rgb(148 163 184 / var(--tw-bg-opacity));
1159 | }
1160 |
1161 | .hover\:bg-slate-300:hover {
1162 | --tw-bg-opacity: 1;
1163 | background-color: rgb(203 213 225 / var(--tw-bg-opacity));
1164 | }
1165 |
1166 | .hover\:bg-black:hover {
1167 | --tw-bg-opacity: 1;
1168 | background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1169 | }
1170 |
1171 | .hover\:bg-gray-900:hover {
1172 | --tw-bg-opacity: 1;
1173 | background-color: rgb(17 24 39 / var(--tw-bg-opacity));
1174 | }
1175 |
1176 | .hover\:bg-gradient-to-t:hover {
1177 | background-image: linear-gradient(to top, var(--tw-gradient-stops));
1178 | }
1179 |
1180 | .hover\:bg-gradient-to-r:hover {
1181 | background-image: linear-gradient(to right, var(--tw-gradient-stops));
1182 | }
1183 |
1184 | .hover\:bg-gradient-to-tr:hover {
1185 | background-image: linear-gradient(to top right, var(--tw-gradient-stops));
1186 | }
1187 |
1188 | .hover\:bg-gradient-to-br:hover {
1189 | background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
1190 | }
1191 |
1192 | .hover\:opacity-25:hover {
1193 | opacity: 0.25;
1194 | }
--------------------------------------------------------------------------------