├── .gitignore ├── src └── css │ └── tailwind.css ├── README.md ├── tailwind.config.js ├── package.json ├── index.html └── public └── css └── tailwind.css /.gitignore: -------------------------------------------------------------------------------- 1 | **node_modules 2 | -------------------------------------------------------------------------------- /src/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # smart-home-tailwind-css 2 | 3 | Screen Shot 2022-02-13 at 1 22 28 AM

4 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ['./public/index.html', './src/**/*.{html,js}'], 3 | theme: { 4 | extend: { 5 | backgroundImage: { 6 | 'plant': "url('https://images.pexels.com/photos/916339/pexels-photo-916339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')", 7 | } 8 | }, 9 | }, 10 | plugins: [], 11 | } 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "smart-house", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "devDependencies": { 11 | "autoprefixer": "^10.4.2", 12 | "postcss": "^8.4.6", 13 | "tailwindcss": "^3.0.22" 14 | }, 15 | "dependencies": {}, 16 | "keywords": [], 17 | "description": "" 18 | } 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Smart house 9 | 66 | 67 | 68 |

69 |

70 |

You are controlling

71 |

Main Lounge & Dining Room

72 |

73 |

74 |

75 |

76 |

77 |

78 |

79 |

Lights

80 |

81 | 82 | 83 |

84 | 85 |

86 |

87 |

Cleaning

88 |

89 | 90 | 91 |

92 | 93 |

94 |

95 |

Music

96 |

97 | 98 | 99 |

100 | 101 |

102 |

103 |

Motion sensor

104 |

105 | 106 | 107 |

108 | 109 |

110 |

111 |

112 |

113 |

114 |

115 | 116 | 133 | 134 | -------------------------------------------------------------------------------- /public/css/tailwind.css: -------------------------------------------------------------------------------- 1 | /* 2 | ! tailwindcss v3.0.22 | 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 | */ 34 | 35 | html { 36 | line-height: 1.5; 37 | /* 1 */ 38 | -webkit-text-size-adjust: 100%; 39 | /* 2 */ 40 | -moz-tab-size: 4; 41 | /* 3 */ 42 | -o-tab-size: 4; 43 | tab-size: 4; 44 | /* 3 */ 45 | 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"; 46 | /* 4 */ 47 | } 48 | 49 | /* 50 | 1. Remove the margin in all browsers. 51 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. 52 | */ 53 | 54 | body { 55 | margin: 0; 56 | /* 1 */ 57 | line-height: inherit; 58 | /* 2 */ 59 | } 60 | 61 | /* 62 | 1. Add the correct height in Firefox. 63 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 64 | 3. Ensure horizontal rules are visible by default. 65 | */ 66 | 67 | hr { 68 | height: 0; 69 | /* 1 */ 70 | color: inherit; 71 | /* 2 */ 72 | border-top-width: 1px; 73 | /* 3 */ 74 | } 75 | 76 | /* 77 | Add the correct text decoration in Chrome, Edge, and Safari. 78 | */ 79 | 80 | abbr:where([title]) { 81 | -webkit-text-decoration: underline dotted; 82 | text-decoration: underline dotted; 83 | } 84 | 85 | /* 86 | Remove the default font size and weight for headings. 87 | */ 88 | 89 | h1, 90 | h2, 91 | h3, 92 | h4, 93 | h5, 94 | h6 { 95 | font-size: inherit; 96 | font-weight: inherit; 97 | } 98 | 99 | /* 100 | Reset links to optimize for opt-in styling instead of opt-out. 101 | */ 102 | 103 | a { 104 | color: inherit; 105 | text-decoration: inherit; 106 | } 107 | 108 | /* 109 | Add the correct font weight in Edge and Safari. 110 | */ 111 | 112 | b, 113 | strong { 114 | font-weight: bolder; 115 | } 116 | 117 | /* 118 | 1. Use the user's configured `mono` font family by default. 119 | 2. Correct the odd `em` font sizing in all browsers. 120 | */ 121 | 122 | code, 123 | kbd, 124 | samp, 125 | pre { 126 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 127 | /* 1 */ 128 | font-size: 1em; 129 | /* 2 */ 130 | } 131 | 132 | /* 133 | Add the correct font size in all browsers. 134 | */ 135 | 136 | small { 137 | font-size: 80%; 138 | } 139 | 140 | /* 141 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. 142 | */ 143 | 144 | sub, 145 | sup { 146 | font-size: 75%; 147 | line-height: 0; 148 | position: relative; 149 | vertical-align: baseline; 150 | } 151 | 152 | sub { 153 | bottom: -0.25em; 154 | } 155 | 156 | sup { 157 | top: -0.5em; 158 | } 159 | 160 | /* 161 | 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) 162 | 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) 163 | 3. Remove gaps between table borders by default. 164 | */ 165 | 166 | table { 167 | text-indent: 0; 168 | /* 1 */ 169 | border-color: inherit; 170 | /* 2 */ 171 | border-collapse: collapse; 172 | /* 3 */ 173 | } 174 | 175 | /* 176 | 1. Change the font styles in all browsers. 177 | 2. Remove the margin in Firefox and Safari. 178 | 3. Remove default padding in all browsers. 179 | */ 180 | 181 | button, 182 | input, 183 | optgroup, 184 | select, 185 | textarea { 186 | font-family: inherit; 187 | /* 1 */ 188 | font-size: 100%; 189 | /* 1 */ 190 | line-height: inherit; 191 | /* 1 */ 192 | color: inherit; 193 | /* 1 */ 194 | margin: 0; 195 | /* 2 */ 196 | padding: 0; 197 | /* 3 */ 198 | } 199 | 200 | /* 201 | Remove the inheritance of text transform in Edge and Firefox. 202 | */ 203 | 204 | button, 205 | select { 206 | text-transform: none; 207 | } 208 | 209 | /* 210 | 1. Correct the inability to style clickable types in iOS and Safari. 211 | 2. Remove default button styles. 212 | */ 213 | 214 | button, 215 | [type='button'], 216 | [type='reset'], 217 | [type='submit'] { 218 | -webkit-appearance: button; 219 | /* 1 */ 220 | background-color: transparent; 221 | /* 2 */ 222 | background-image: none; 223 | /* 2 */ 224 | } 225 | 226 | /* 227 | Use the modern Firefox focus style for all focusable elements. 228 | */ 229 | 230 | :-moz-focusring { 231 | outline: auto; 232 | } 233 | 234 | /* 235 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 236 | */ 237 | 238 | :-moz-ui-invalid { 239 | box-shadow: none; 240 | } 241 | 242 | /* 243 | Add the correct vertical alignment in Chrome and Firefox. 244 | */ 245 | 246 | progress { 247 | vertical-align: baseline; 248 | } 249 | 250 | /* 251 | Correct the cursor style of increment and decrement buttons in Safari. 252 | */ 253 | 254 | ::-webkit-inner-spin-button, 255 | ::-webkit-outer-spin-button { 256 | height: auto; 257 | } 258 | 259 | /* 260 | 1. Correct the odd appearance in Chrome and Safari. 261 | 2. Correct the outline style in Safari. 262 | */ 263 | 264 | [type='search'] { 265 | -webkit-appearance: textfield; 266 | /* 1 */ 267 | outline-offset: -2px; 268 | /* 2 */ 269 | } 270 | 271 | /* 272 | Remove the inner padding in Chrome and Safari on macOS. 273 | */ 274 | 275 | ::-webkit-search-decoration { 276 | -webkit-appearance: none; 277 | } 278 | 279 | /* 280 | 1. Correct the inability to style clickable types in iOS and Safari. 281 | 2. Change font properties to `inherit` in Safari. 282 | */ 283 | 284 | ::-webkit-file-upload-button { 285 | -webkit-appearance: button; 286 | /* 1 */ 287 | font: inherit; 288 | /* 2 */ 289 | } 290 | 291 | /* 292 | Add the correct display in Chrome and Safari. 293 | */ 294 | 295 | summary { 296 | display: list-item; 297 | } 298 | 299 | /* 300 | Removes the default spacing and border for appropriate elements. 301 | */ 302 | 303 | blockquote, 304 | dl, 305 | dd, 306 | h1, 307 | h2, 308 | h3, 309 | h4, 310 | h5, 311 | h6, 312 | hr, 313 | figure, 314 | p, 315 | pre { 316 | margin: 0; 317 | } 318 | 319 | fieldset { 320 | margin: 0; 321 | padding: 0; 322 | } 323 | 324 | legend { 325 | padding: 0; 326 | } 327 | 328 | ol, 329 | ul, 330 | menu { 331 | list-style: none; 332 | margin: 0; 333 | padding: 0; 334 | } 335 | 336 | /* 337 | Prevent resizing textareas horizontally by default. 338 | */ 339 | 340 | textarea { 341 | resize: vertical; 342 | } 343 | 344 | /* 345 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 346 | 2. Set the default placeholder color to the user's configured gray 400 color. 347 | */ 348 | 349 | input::-moz-placeholder, textarea::-moz-placeholder { 350 | opacity: 1; 351 | /* 1 */ 352 | color: #9ca3af; 353 | /* 2 */ 354 | } 355 | 356 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { 357 | opacity: 1; 358 | /* 1 */ 359 | color: #9ca3af; 360 | /* 2 */ 361 | } 362 | 363 | input::placeholder, 364 | textarea::placeholder { 365 | opacity: 1; 366 | /* 1 */ 367 | color: #9ca3af; 368 | /* 2 */ 369 | } 370 | 371 | /* 372 | Set the default cursor for buttons. 373 | */ 374 | 375 | button, 376 | [role="button"] { 377 | cursor: pointer; 378 | } 379 | 380 | /* 381 | Make sure disabled buttons don't get the pointer cursor. 382 | */ 383 | 384 | :disabled { 385 | cursor: default; 386 | } 387 | 388 | /* 389 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 390 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 391 | This can trigger a poorly considered lint error in some tools but is included by design. 392 | */ 393 | 394 | img, 395 | svg, 396 | video, 397 | canvas, 398 | audio, 399 | iframe, 400 | embed, 401 | object { 402 | display: block; 403 | /* 1 */ 404 | vertical-align: middle; 405 | /* 2 */ 406 | } 407 | 408 | /* 409 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 410 | */ 411 | 412 | img, 413 | video { 414 | max-width: 100%; 415 | height: auto; 416 | } 417 | 418 | /* 419 | Ensure the default browser behavior of the `hidden` attribute. 420 | */ 421 | 422 | [hidden] { 423 | display: none; 424 | } 425 | 426 | *, ::before, ::after { 427 | --tw-translate-x: 0; 428 | --tw-translate-y: 0; 429 | --tw-rotate: 0; 430 | --tw-skew-x: 0; 431 | --tw-skew-y: 0; 432 | --tw-scale-x: 1; 433 | --tw-scale-y: 1; 434 | --tw-pan-x: ; 435 | --tw-pan-y: ; 436 | --tw-pinch-zoom: ; 437 | --tw-scroll-snap-strictness: proximity; 438 | --tw-ordinal: ; 439 | --tw-slashed-zero: ; 440 | --tw-numeric-figure: ; 441 | --tw-numeric-spacing: ; 442 | --tw-numeric-fraction: ; 443 | --tw-ring-inset: ; 444 | --tw-ring-offset-width: 0px; 445 | --tw-ring-offset-color: #fff; 446 | --tw-ring-color: rgb(59 130 246 / 0.5); 447 | --tw-ring-offset-shadow: 0 0 #0000; 448 | --tw-ring-shadow: 0 0 #0000; 449 | --tw-shadow: 0 0 #0000; 450 | --tw-shadow-colored: 0 0 #0000; 451 | --tw-blur: ; 452 | --tw-brightness: ; 453 | --tw-contrast: ; 454 | --tw-grayscale: ; 455 | --tw-hue-rotate: ; 456 | --tw-invert: ; 457 | --tw-saturate: ; 458 | --tw-sepia: ; 459 | --tw-drop-shadow: ; 460 | --tw-backdrop-blur: ; 461 | --tw-backdrop-brightness: ; 462 | --tw-backdrop-contrast: ; 463 | --tw-backdrop-grayscale: ; 464 | --tw-backdrop-hue-rotate: ; 465 | --tw-backdrop-invert: ; 466 | --tw-backdrop-opacity: ; 467 | --tw-backdrop-saturate: ; 468 | --tw-backdrop-sepia: ; 469 | } 470 | 471 | .absolute { 472 | position: absolute; 473 | } 474 | 475 | .relative { 476 | position: relative; 477 | } 478 | 479 | .m-0 { 480 | margin: 0px; 481 | } 482 | 483 | .m-2 { 484 | margin: 0.5rem; 485 | } 486 | 487 | .m-4 { 488 | margin: 1rem; 489 | } 490 | 491 | .m-1 { 492 | margin: 0.25rem; 493 | } 494 | 495 | .my-40 { 496 | margin-top: 10rem; 497 | margin-bottom: 10rem; 498 | } 499 | 500 | .my-20 { 501 | margin-top: 5rem; 502 | margin-bottom: 5rem; 503 | } 504 | 505 | .my-16 { 506 | margin-top: 4rem; 507 | margin-bottom: 4rem; 508 | } 509 | 510 | .mt-0 { 511 | margin-top: 0px; 512 | } 513 | 514 | .mb-2 { 515 | margin-bottom: 0.5rem; 516 | } 517 | 518 | .mt-16 { 519 | margin-top: 4rem; 520 | } 521 | 522 | .mb-0 { 523 | margin-bottom: 0px; 524 | } 525 | 526 | .mt-12 { 527 | margin-top: 3rem; 528 | } 529 | 530 | .mt-8 { 531 | margin-top: 2rem; 532 | } 533 | 534 | .box-border { 535 | box-sizing: border-box; 536 | } 537 | 538 | .flex { 539 | display: flex; 540 | } 541 | 542 | .grid { 543 | display: grid; 544 | } 545 | 546 | .h-full { 547 | height: 100%; 548 | } 549 | 550 | .h-4 { 551 | height: 1rem; 552 | } 553 | 554 | .h-8 { 555 | height: 2rem; 556 | } 557 | 558 | .h-6 { 559 | height: 1.5rem; 560 | } 561 | 562 | .h-5 { 563 | height: 1.25rem; 564 | } 565 | 566 | .min-h-screen { 567 | min-height: 100vh; 568 | } 569 | 570 | .w-full { 571 | width: 100%; 572 | } 573 | 574 | .w-8\/12 { 575 | width: 66.666667%; 576 | } 577 | 578 | .w-10\/12 { 579 | width: 83.333333%; 580 | } 581 | 582 | .w-9\/12 { 583 | width: 75%; 584 | } 585 | 586 | .w-11\/12 { 587 | width: 91.666667%; 588 | } 589 | 590 | .w-60 { 591 | width: 15rem; 592 | } 593 | 594 | .w-3 { 595 | width: 0.75rem; 596 | } 597 | 598 | .w-10 { 599 | width: 2.5rem; 600 | } 601 | 602 | .w-6 { 603 | width: 1.5rem; 604 | } 605 | 606 | .w-14 { 607 | width: 3.5rem; 608 | } 609 | 610 | .w-5 { 611 | width: 1.25rem; 612 | } 613 | 614 | .w-8 { 615 | width: 2rem; 616 | } 617 | 618 | .w-12 { 619 | width: 3rem; 620 | } 621 | 622 | .max-w-full { 623 | max-width: 100%; 624 | } 625 | 626 | .max-w-lg { 627 | max-width: 32rem; 628 | } 629 | 630 | .max-w-screen-lg { 631 | max-width: 1024px; 632 | } 633 | 634 | .transform { 635 | 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)); 636 | } 637 | 638 | .cursor-pointer { 639 | cursor: pointer; 640 | } 641 | 642 | .grid-cols-2 { 643 | grid-template-columns: repeat(2, minmax(0, 1fr)); 644 | } 645 | 646 | .grid-rows-2 { 647 | grid-template-rows: repeat(2, minmax(0, 1fr)); 648 | } 649 | 650 | .flex-col { 651 | flex-direction: column; 652 | } 653 | 654 | .place-items-center { 655 | place-items: center; 656 | } 657 | 658 | .items-center { 659 | align-items: center; 660 | } 661 | 662 | .justify-center { 663 | justify-content: center; 664 | } 665 | 666 | .gap-3 { 667 | gap: 0.75rem; 668 | } 669 | 670 | .gap-5 { 671 | gap: 1.25rem; 672 | } 673 | 674 | .gap-6 { 675 | gap: 1.5rem; 676 | } 677 | 678 | .gap-8 { 679 | gap: 2rem; 680 | } 681 | 682 | .gap-10 { 683 | gap: 2.5rem; 684 | } 685 | 686 | .self-end { 687 | align-self: flex-end; 688 | } 689 | 690 | .rounded-lg { 691 | border-radius: 0.5rem; 692 | } 693 | 694 | .rounded-full { 695 | border-radius: 9999px; 696 | } 697 | 698 | .border { 699 | border-width: 1px; 700 | } 701 | 702 | .bg-lime-200 { 703 | --tw-bg-opacity: 1; 704 | background-color: rgb(217 249 157 / var(--tw-bg-opacity)); 705 | } 706 | 707 | .bg-lime-300 { 708 | --tw-bg-opacity: 1; 709 | background-color: rgb(190 242 100 / var(--tw-bg-opacity)); 710 | } 711 | 712 | .bg-lime-400 { 713 | --tw-bg-opacity: 1; 714 | background-color: rgb(163 230 53 / var(--tw-bg-opacity)); 715 | } 716 | 717 | .bg-lime-500 { 718 | --tw-bg-opacity: 1; 719 | background-color: rgb(132 204 22 / var(--tw-bg-opacity)); 720 | } 721 | 722 | .bg-lime-600 { 723 | --tw-bg-opacity: 1; 724 | background-color: rgb(101 163 13 / var(--tw-bg-opacity)); 725 | } 726 | 727 | .bg-gray-400 { 728 | --tw-bg-opacity: 1; 729 | background-color: rgb(156 163 175 / var(--tw-bg-opacity)); 730 | } 731 | 732 | .bg-black { 733 | --tw-bg-opacity: 1; 734 | background-color: rgb(0 0 0 / var(--tw-bg-opacity)); 735 | } 736 | 737 | .bg-gray-200 { 738 | --tw-bg-opacity: 1; 739 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 740 | } 741 | 742 | .bg-white { 743 | --tw-bg-opacity: 1; 744 | background-color: rgb(255 255 255 / var(--tw-bg-opacity)); 745 | } 746 | 747 | .bg-gray-300 { 748 | --tw-bg-opacity: 1; 749 | background-color: rgb(209 213 219 / var(--tw-bg-opacity)); 750 | } 751 | 752 | .bg-plant { 753 | background-image: url('https://images.pexels.com/photos/916339/pexels-photo-916339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'); 754 | } 755 | 756 | .bg-cover { 757 | background-size: cover; 758 | } 759 | 760 | .bg-center { 761 | background-position: center; 762 | } 763 | 764 | .p-16 { 765 | padding: 4rem; 766 | } 767 | 768 | .p-8 { 769 | padding: 2rem; 770 | } 771 | 772 | .p-20 { 773 | padding: 5rem; 774 | } 775 | 776 | .p-14 { 777 | padding: 3.5rem; 778 | } 779 | 780 | .p-12 { 781 | padding: 3rem; 782 | } 783 | 784 | .p-10 { 785 | padding: 2.5rem; 786 | } 787 | 788 | .py-16 { 789 | padding-top: 4rem; 790 | padding-bottom: 4rem; 791 | } 792 | 793 | .py-8 { 794 | padding-top: 2rem; 795 | padding-bottom: 2rem; 796 | } 797 | 798 | .py-4 { 799 | padding-top: 1rem; 800 | padding-bottom: 1rem; 801 | } 802 | 803 | .py-3 { 804 | padding-top: 0.75rem; 805 | padding-bottom: 0.75rem; 806 | } 807 | 808 | .text-center { 809 | text-align: center; 810 | } 811 | 812 | .text-xl { 813 | font-size: 1.25rem; 814 | line-height: 1.75rem; 815 | } 816 | 817 | .text-4xl { 818 | font-size: 2.25rem; 819 | line-height: 2.5rem; 820 | } 821 | 822 | .text-2xl { 823 | font-size: 1.5rem; 824 | line-height: 2rem; 825 | } 826 | 827 | .text-base { 828 | font-size: 1rem; 829 | line-height: 1.5rem; 830 | } 831 | 832 | .text-sm { 833 | font-size: 0.875rem; 834 | line-height: 1.25rem; 835 | } 836 | 837 | .font-bold { 838 | font-weight: 700; 839 | } 840 | 841 | .opacity-0 { 842 | opacity: 0; 843 | } 844 | 845 | .blur { 846 | --tw-blur: blur(8px); 847 | filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); 848 | } 849 | 850 | .backdrop-filter { 851 | -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); 852 | backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); 853 | } 854 | 855 | .transition { 856 | transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; 857 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; 858 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; 859 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 860 | transition-duration: 150ms; 861 | } 862 | 863 | @media (min-width: 640px) { 864 | .sm\:flex-row { 865 | flex-direction: row; 866 | } 867 | } 868 | 869 | @media (min-width: 768px) { 870 | .md\:my-16 { 871 | margin-top: 4rem; 872 | margin-bottom: 4rem; 873 | } 874 | 875 | .md\:grid-cols-4 { 876 | grid-template-columns: repeat(4, minmax(0, 1fr)); 877 | } 878 | 879 | .md\:grid-rows-1 { 880 | grid-template-rows: repeat(1, minmax(0, 1fr)); 881 | } 882 | 883 | .md\:flex-row { 884 | flex-direction: row; 885 | } 886 | } 887 | 888 | @media (min-width: 1024px) { 889 | .lg\:my-16 { 890 | margin-top: 4rem; 891 | margin-bottom: 4rem; 892 | } 893 | 894 | .lg\:my-0 { 895 | margin-top: 0px; 896 | margin-bottom: 0px; 897 | } 898 | 899 | .lg\:mt-16 { 900 | margin-top: 4rem; 901 | } 902 | 903 | .lg\:mt-0 { 904 | margin-top: 0px; 905 | } 906 | 907 | .lg\:h-full { 908 | height: 100%; 909 | } 910 | 911 | .lg\:w-4\/5 { 912 | width: 80%; 913 | } 914 | 915 | .lg\:w-1\/5 { 916 | width: 20%; 917 | } 918 | 919 | .lg\:w-3\/5 { 920 | width: 60%; 921 | } 922 | 923 | .lg\:w-2\/5 { 924 | width: 40%; 925 | } 926 | 927 | .lg\:w-4\/6 { 928 | width: 66.666667%; 929 | } 930 | 931 | .lg\:w-2\/6 { 932 | width: 33.333333%; 933 | } 934 | 935 | .lg\:w-full { 936 | width: 100%; 937 | } 938 | 939 | .lg\:w-10\/12 { 940 | width: 83.333333%; 941 | } 942 | 943 | .lg\:w-8\/12 { 944 | width: 66.666667%; 945 | } 946 | 947 | .lg\:grid-cols-2 { 948 | grid-template-columns: repeat(2, minmax(0, 1fr)); 949 | } 950 | 951 | .lg\:grid-rows-2 { 952 | grid-template-rows: repeat(2, minmax(0, 1fr)); 953 | } 954 | 955 | .lg\:flex-row { 956 | flex-direction: row; 957 | } 958 | 959 | .lg\:gap-5 { 960 | gap: 1.25rem; 961 | } 962 | 963 | .lg\:p-0 { 964 | padding: 0px; 965 | } 966 | 967 | .lg\:p-16 { 968 | padding: 4rem; 969 | } 970 | 971 | .lg\:py-0 { 972 | padding-top: 0px; 973 | padding-bottom: 0px; 974 | } 975 | 976 | .lg\:text-4xl { 977 | font-size: 2.25rem; 978 | line-height: 2.5rem; 979 | } 980 | 981 | .lg\:text-xl { 982 | font-size: 1.25rem; 983 | line-height: 1.75rem; 984 | } 985 | } 986 | --------------------------------------------------------------------------------