├── 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 | ![calci js](https://user-images.githubusercontent.com/98420696/229597726-412babb1-24ab-4256-983f-ce6138f99d9f.png) 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 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 | -------------------------------------------------------------------------------- /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 | } --------------------------------------------------------------------------------