├── .gitattributes ├── .vscode └── settings.json ├── README.md ├── index.html └── static ├── img ├── JBLHorizon_001_dvHAMaster.png ├── JBL_JR 310BT_Product Image_Hero_Skyblue.png ├── JBL_Quantum_400_Product Image_Hero 02.png └── kisspng-beats-electronics-headphones-apple-beats-studio-red-headphones.png └── tailwind ├── custom.css ├── tailwind.config.js ├── tailwind.css └── tailwind.min.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-mega-menu 2 | Make Mega Menu and Dropdown Menu with Tailwind CSS 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tailwind Mega Menu 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /static/img/JBLHorizon_001_dvHAMaster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trananhtuat/tailwindcss-mega-menu/f49b00bfe55d2d54d60e5a2b0ceb195f40075c05/static/img/JBLHorizon_001_dvHAMaster.png -------------------------------------------------------------------------------- /static/img/JBL_JR 310BT_Product Image_Hero_Skyblue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trananhtuat/tailwindcss-mega-menu/f49b00bfe55d2d54d60e5a2b0ceb195f40075c05/static/img/JBL_JR 310BT_Product Image_Hero_Skyblue.png -------------------------------------------------------------------------------- /static/img/JBL_Quantum_400_Product Image_Hero 02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trananhtuat/tailwindcss-mega-menu/f49b00bfe55d2d54d60e5a2b0ceb195f40075c05/static/img/JBL_Quantum_400_Product Image_Hero 02.png -------------------------------------------------------------------------------- /static/img/kisspng-beats-electronics-headphones-apple-beats-studio-red-headphones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trananhtuat/tailwindcss-mega-menu/f49b00bfe55d2d54d60e5a2b0ceb195f40075c05/static/img/kisspng-beats-electronics-headphones-apple-beats-studio-red-headphones.png -------------------------------------------------------------------------------- /static/tailwind/custom.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .menu-item { 7 | @apply p-5 inline-block border-b-4 border-black hover:border-white; 8 | } 9 | 10 | .mega-sub-item { 11 | @apply block p-2 hover:bg-white hover:text-black cursor-pointer; 12 | } 13 | 14 | .mega-sub-item-title { 15 | @apply block font-semibold text-xl mb-5; 16 | } 17 | 18 | .menu-sub-item { 19 | @apply block px-7 py-2 hover:bg-white hover:text-black; 20 | } 21 | } 22 | 23 | @layer utilities { 24 | .sub-dropdown:hover>.sub-dropdown-content { 25 | opacity: 1; 26 | visibility: visible; 27 | top: 0; 28 | } 29 | 30 | .sub-dropdown:hover>a { 31 | background-color: #fff; 32 | color: #000; 33 | } 34 | } -------------------------------------------------------------------------------- /static/tailwind/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [ 3 | '../../*.html', 4 | ], 5 | darkMode: false, // or 'media' or 'class' 6 | theme: { 7 | extend: { 8 | fontFamily: { 9 | sans: ['Oswald', 'sans-serif'], 10 | }, 11 | }, 12 | }, 13 | variants: { 14 | extend: { 15 | display: ["group-hover"], 16 | margin: ["group-hover"], 17 | visibility: ["group-hover"], 18 | }, 19 | }, 20 | plugins: [], 21 | } 22 | -------------------------------------------------------------------------------- /static/tailwind/tailwind.css: -------------------------------------------------------------------------------- 1 | /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ 2 | 3 | /* 4 | Document 5 | ======== 6 | */ 7 | 8 | /** 9 | Use a better box model (opinionated). 10 | */ 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | box-sizing: border-box; 16 | } 17 | 18 | /** 19 | Use a more readable tab size (opinionated). 20 | */ 21 | 22 | :root { 23 | -moz-tab-size: 4; 24 | -o-tab-size: 4; 25 | tab-size: 4; 26 | } 27 | 28 | /** 29 | 1. Correct the line height in all browsers. 30 | 2. Prevent adjustments of font size after orientation changes in iOS. 31 | */ 32 | 33 | html { 34 | line-height: 1.15; /* 1 */ 35 | -webkit-text-size-adjust: 100%; /* 2 */ 36 | } 37 | 38 | /* 39 | Sections 40 | ======== 41 | */ 42 | 43 | /** 44 | Remove the margin in all browsers. 45 | */ 46 | 47 | body { 48 | margin: 0; 49 | } 50 | 51 | /** 52 | Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 53 | */ 54 | 55 | body { 56 | font-family: 57 | system-ui, 58 | -apple-system, /* Firefox supports this but not yet `system-ui` */ 59 | 'Segoe UI', 60 | Roboto, 61 | Helvetica, 62 | Arial, 63 | sans-serif, 64 | 'Apple Color Emoji', 65 | 'Segoe UI Emoji'; 66 | } 67 | 68 | /* 69 | Grouping content 70 | ================ 71 | */ 72 | 73 | /** 74 | 1. Add the correct height in Firefox. 75 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 76 | */ 77 | 78 | hr { 79 | height: 0; /* 1 */ 80 | color: inherit; /* 2 */ 81 | } 82 | 83 | /* 84 | Text-level semantics 85 | ==================== 86 | */ 87 | 88 | /** 89 | Add the correct text decoration in Chrome, Edge, and Safari. 90 | */ 91 | 92 | abbr[title] { 93 | -webkit-text-decoration: underline dotted; 94 | text-decoration: underline dotted; 95 | } 96 | 97 | /** 98 | Add the correct font weight in Edge and Safari. 99 | */ 100 | 101 | b, 102 | strong { 103 | font-weight: bolder; 104 | } 105 | 106 | /** 107 | 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 108 | 2. Correct the odd 'em' font sizing in all browsers. 109 | */ 110 | 111 | code, 112 | kbd, 113 | samp, 114 | pre { 115 | font-family: 116 | ui-monospace, 117 | SFMono-Regular, 118 | Consolas, 119 | 'Liberation Mono', 120 | Menlo, 121 | monospace; /* 1 */ 122 | font-size: 1em; /* 2 */ 123 | } 124 | 125 | /** 126 | Add the correct font size in all browsers. 127 | */ 128 | 129 | small { 130 | font-size: 80%; 131 | } 132 | 133 | /** 134 | Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. 135 | */ 136 | 137 | sub, 138 | sup { 139 | font-size: 75%; 140 | line-height: 0; 141 | position: relative; 142 | vertical-align: baseline; 143 | } 144 | 145 | sub { 146 | bottom: -0.25em; 147 | } 148 | 149 | sup { 150 | top: -0.5em; 151 | } 152 | 153 | /* 154 | Tabular data 155 | ============ 156 | */ 157 | 158 | /** 159 | 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) 160 | 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) 161 | */ 162 | 163 | table { 164 | text-indent: 0; /* 1 */ 165 | border-color: inherit; /* 2 */ 166 | } 167 | 168 | /* 169 | Forms 170 | ===== 171 | */ 172 | 173 | /** 174 | 1. Change the font styles in all browsers. 175 | 2. Remove the margin in Firefox and Safari. 176 | */ 177 | 178 | button, 179 | input, 180 | optgroup, 181 | select, 182 | textarea { 183 | font-family: inherit; /* 1 */ 184 | font-size: 100%; /* 1 */ 185 | line-height: 1.15; /* 1 */ 186 | margin: 0; /* 2 */ 187 | } 188 | 189 | /** 190 | Remove the inheritance of text transform in Edge and Firefox. 191 | 1. Remove the inheritance of text transform in Firefox. 192 | */ 193 | 194 | button, 195 | select { /* 1 */ 196 | text-transform: none; 197 | } 198 | 199 | /** 200 | Correct the inability to style clickable types in iOS and Safari. 201 | */ 202 | 203 | button { 204 | -webkit-appearance: button; 205 | } 206 | 207 | /** 208 | Remove the inner border and padding in Firefox. 209 | */ 210 | 211 | /** 212 | Restore the focus styles unset by the previous rule. 213 | */ 214 | 215 | /** 216 | Remove the additional ':invalid' styles in Firefox. 217 | See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 218 | */ 219 | 220 | /** 221 | Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. 222 | */ 223 | 224 | legend { 225 | padding: 0; 226 | } 227 | 228 | /** 229 | Add the correct vertical alignment in Chrome and Firefox. 230 | */ 231 | 232 | progress { 233 | vertical-align: baseline; 234 | } 235 | 236 | /** 237 | Correct the cursor style of increment and decrement buttons in Safari. 238 | */ 239 | 240 | /** 241 | 1. Correct the odd appearance in Chrome and Safari. 242 | 2. Correct the outline style in Safari. 243 | */ 244 | 245 | /** 246 | Remove the inner padding in Chrome and Safari on macOS. 247 | */ 248 | 249 | /** 250 | 1. Correct the inability to style clickable types in iOS and Safari. 251 | 2. Change font properties to 'inherit' in Safari. 252 | */ 253 | 254 | /* 255 | Interactive 256 | =========== 257 | */ 258 | 259 | /* 260 | Add the correct display in Chrome and Safari. 261 | */ 262 | 263 | summary { 264 | display: list-item; 265 | } 266 | 267 | /** 268 | * Manually forked from SUIT CSS Base: https://github.com/suitcss/base 269 | * A thin layer on top of normalize.css that provides a starting point more 270 | * suitable for web applications. 271 | */ 272 | 273 | /** 274 | * Removes the default spacing and border for appropriate elements. 275 | */ 276 | 277 | blockquote, 278 | dl, 279 | dd, 280 | h1, 281 | h2, 282 | h3, 283 | h4, 284 | h5, 285 | h6, 286 | hr, 287 | figure, 288 | p, 289 | pre { 290 | margin: 0; 291 | } 292 | 293 | button { 294 | background-color: transparent; 295 | background-image: none; 296 | } 297 | 298 | /** 299 | * Work around a Firefox/IE bug where the transparent `button` background 300 | * results in a loss of the default `button` focus styles. 301 | */ 302 | 303 | button:focus { 304 | outline: 1px dotted; 305 | outline: 5px auto -webkit-focus-ring-color; 306 | } 307 | 308 | fieldset { 309 | margin: 0; 310 | padding: 0; 311 | } 312 | 313 | ol, 314 | ul { 315 | list-style: none; 316 | margin: 0; 317 | padding: 0; 318 | } 319 | 320 | /** 321 | * Tailwind custom reset styles 322 | */ 323 | 324 | /** 325 | * 1. Use the user's configured `sans` font-family (with Tailwind's default 326 | * sans-serif font stack as a fallback) as a sane default. 327 | * 2. Use Tailwind's default "normal" line-height so the user isn't forced 328 | * to override it to ensure consistency even when using the default theme. 329 | */ 330 | 331 | html { 332 | font-family: Oswald, sans-serif; /* 1 */ 333 | line-height: 1.5; /* 2 */ 334 | } 335 | 336 | /** 337 | * Inherit font-family and line-height from `html` so users can set them as 338 | * a class directly on the `html` element. 339 | */ 340 | 341 | body { 342 | font-family: inherit; 343 | line-height: inherit; 344 | } 345 | 346 | /** 347 | * 1. Prevent padding and border from affecting element width. 348 | * 349 | * We used to set this in the html element and inherit from 350 | * the parent element for everything else. This caused issues 351 | * in shadow-dom-enhanced elements like
where the content 352 | * is wrapped by a div with box-sizing set to `content-box`. 353 | * 354 | * https://github.com/mozdevs/cssremedy/issues/4 355 | * 356 | * 357 | * 2. Allow adding a border to an element by just adding a border-width. 358 | * 359 | * By default, the way the browser specifies that an element should have no 360 | * border is by setting it's border-style to `none` in the user-agent 361 | * stylesheet. 362 | * 363 | * In order to easily add borders to elements by just setting the `border-width` 364 | * property, we change the default border-style for all elements to `solid`, and 365 | * use border-width to hide them instead. This way our `border` utilities only 366 | * need to set the `border-width` property instead of the entire `border` 367 | * shorthand, making our border utilities much more straightforward to compose. 368 | * 369 | * https://github.com/tailwindcss/tailwindcss/pull/116 370 | */ 371 | 372 | *, 373 | ::before, 374 | ::after { 375 | box-sizing: border-box; /* 1 */ 376 | border-width: 0; /* 2 */ 377 | border-style: solid; /* 2 */ 378 | border-color: #e5e7eb; /* 2 */ 379 | } 380 | 381 | /* 382 | * Ensure horizontal rules are visible by default 383 | */ 384 | 385 | hr { 386 | border-top-width: 1px; 387 | } 388 | 389 | /** 390 | * Undo the `border-style: none` reset that Normalize applies to images so that 391 | * our `border-{width}` utilities have the expected effect. 392 | * 393 | * The Normalize reset is unnecessary for us since we default the border-width 394 | * to 0 on all elements. 395 | * 396 | * https://github.com/tailwindcss/tailwindcss/issues/362 397 | */ 398 | 399 | img { 400 | border-style: solid; 401 | } 402 | 403 | textarea { 404 | resize: vertical; 405 | } 406 | 407 | input::-moz-placeholder, textarea::-moz-placeholder { 408 | color: #9ca3af; 409 | } 410 | 411 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { 412 | color: #9ca3af; 413 | } 414 | 415 | input::placeholder, 416 | textarea::placeholder { 417 | color: #9ca3af; 418 | } 419 | 420 | button { 421 | cursor: pointer; 422 | } 423 | 424 | table { 425 | border-collapse: collapse; 426 | } 427 | 428 | h1, 429 | h2, 430 | h3, 431 | h4, 432 | h5, 433 | h6 { 434 | font-size: inherit; 435 | font-weight: inherit; 436 | } 437 | 438 | /** 439 | * Reset links to optimize for opt-in styling instead of 440 | * opt-out. 441 | */ 442 | 443 | a { 444 | color: inherit; 445 | text-decoration: inherit; 446 | } 447 | 448 | /** 449 | * Reset form element properties that are easy to forget to 450 | * style explicitly so you don't inadvertently introduce 451 | * styles that deviate from your design system. These styles 452 | * supplement a partial reset that is already applied by 453 | * normalize.css. 454 | */ 455 | 456 | button, 457 | input, 458 | optgroup, 459 | select, 460 | textarea { 461 | padding: 0; 462 | line-height: inherit; 463 | color: inherit; 464 | } 465 | 466 | /** 467 | * Use the configured 'mono' font family for elements that 468 | * are expected to be rendered with a monospace font, falling 469 | * back to the system monospace stack if there is no configured 470 | * 'mono' font family. 471 | */ 472 | 473 | pre, 474 | code, 475 | kbd, 476 | samp { 477 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 478 | } 479 | 480 | /** 481 | * Make replaced elements `display: block` by default as that's 482 | * the behavior you want almost all of the time. Inspired by 483 | * CSS Remedy, with `svg` added as well. 484 | * 485 | * https://github.com/mozdevs/cssremedy/issues/14 486 | */ 487 | 488 | img, 489 | svg, 490 | video, 491 | canvas, 492 | audio, 493 | iframe, 494 | embed, 495 | object { 496 | display: block; 497 | vertical-align: middle; 498 | } 499 | 500 | /** 501 | * Constrain images and videos to the parent width and preserve 502 | * their instrinsic aspect ratio. 503 | * 504 | * https://github.com/mozdevs/cssremedy/issues/14 505 | */ 506 | 507 | img, 508 | video { 509 | max-width: 100%; 510 | height: auto; 511 | } 512 | 513 | .menu-item { 514 | --tw-border-opacity: 1; 515 | border-color: rgba(0, 0, 0, var(--tw-border-opacity)); 516 | } 517 | 518 | .menu-item:hover { 519 | --tw-border-opacity: 1; 520 | border-color: rgba(255, 255, 255, var(--tw-border-opacity)); 521 | } 522 | 523 | .menu-item { 524 | border-bottom-width: 4px; 525 | display: inline-block; 526 | padding: 1.25rem; 527 | } 528 | 529 | .mega-sub-item:hover { 530 | --tw-bg-opacity: 1; 531 | background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); 532 | } 533 | 534 | .mega-sub-item { 535 | cursor: pointer; 536 | display: block; 537 | padding: 0.5rem; 538 | } 539 | 540 | .mega-sub-item:hover { 541 | --tw-text-opacity: 1; 542 | color: rgba(0, 0, 0, var(--tw-text-opacity)); 543 | } 544 | 545 | .mega-sub-item-title { 546 | display: block; 547 | font-weight: 600; 548 | font-size: 1.25rem; 549 | line-height: 1.75rem; 550 | margin-bottom: 1.25rem; 551 | } 552 | 553 | .menu-sub-item:hover { 554 | --tw-bg-opacity: 1; 555 | background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); 556 | } 557 | 558 | .menu-sub-item { 559 | display: block; 560 | padding-top: 0.5rem; 561 | padding-bottom: 0.5rem; 562 | padding-left: 1.75rem; 563 | padding-right: 1.75rem; 564 | } 565 | 566 | .menu-sub-item:hover { 567 | --tw-text-opacity: 1; 568 | color: rgba(0, 0, 0, var(--tw-text-opacity)); 569 | } 570 | 571 | .bg-black { 572 | --tw-bg-opacity: 1; 573 | background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); 574 | } 575 | 576 | .bg-gray-300 { 577 | --tw-bg-opacity: 1; 578 | background-color: rgba(209, 213, 219, var(--tw-bg-opacity)); 579 | } 580 | 581 | .group:hover .group-hover\:border-white { 582 | --tw-border-opacity: 1; 583 | border-color: rgba(255, 255, 255, var(--tw-border-opacity)); 584 | } 585 | 586 | .flex { 587 | display: flex; 588 | } 589 | 590 | .table { 591 | display: table; 592 | } 593 | 594 | .grid { 595 | display: grid; 596 | } 597 | 598 | .items-center { 599 | align-items: center; 600 | } 601 | 602 | .justify-between { 603 | justify-content: space-between; 604 | } 605 | 606 | .font-sans { 607 | font-family: Oswald, sans-serif; 608 | } 609 | 610 | .font-semibold { 611 | font-weight: 600; 612 | } 613 | 614 | .font-bold { 615 | font-weight: 700; 616 | } 617 | 618 | .h-screen { 619 | height: 100vh; 620 | } 621 | 622 | .text-3xl { 623 | font-size: 1.875rem; 624 | line-height: 2.25rem; 625 | } 626 | 627 | .mx-auto { 628 | margin-left: auto; 629 | margin-right: auto; 630 | } 631 | 632 | .mt-14 { 633 | margin-top: 3.5rem; 634 | } 635 | 636 | .group:hover .group-hover\:mt-0 { 637 | margin-top: 0px; 638 | } 639 | 640 | .max-w-7xl { 641 | max-width: 80rem; 642 | } 643 | 644 | .opacity-0 { 645 | opacity: 0; 646 | } 647 | 648 | .group:hover .group-hover\:opacity-100 { 649 | opacity: 1; 650 | } 651 | 652 | .p-2 { 653 | padding: 0.5rem; 654 | } 655 | 656 | .p-5 { 657 | padding: 1.25rem; 658 | } 659 | 660 | .absolute { 661 | position: absolute; 662 | } 663 | 664 | .relative { 665 | position: relative; 666 | } 667 | 668 | .left-0 { 669 | left: 0px; 670 | } 671 | 672 | .top-full { 673 | top: 100%; 674 | } 675 | 676 | .left-full { 677 | left: 100%; 678 | } 679 | 680 | * { 681 | --tw-shadow: 0 0 #0000; 682 | } 683 | 684 | * { 685 | --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); 686 | --tw-ring-offset-width: 0px; 687 | --tw-ring-offset-color: #fff; 688 | --tw-ring-color: rgba(59, 130, 246, 0.5); 689 | --tw-ring-offset-shadow: 0 0 #0000; 690 | --tw-ring-shadow: 0 0 #0000; 691 | } 692 | 693 | .text-white { 694 | --tw-text-opacity: 1; 695 | color: rgba(255, 255, 255, var(--tw-text-opacity)); 696 | } 697 | 698 | .invisible { 699 | visibility: hidden; 700 | } 701 | 702 | .group:hover .group-hover\:visible { 703 | visibility: visible; 704 | } 705 | 706 | .w-full { 707 | width: 100%; 708 | } 709 | 710 | .w-max { 711 | width: -webkit-max-content; 712 | width: -moz-max-content; 713 | width: max-content; 714 | } 715 | 716 | .grid-cols-4 { 717 | grid-template-columns: repeat(4, minmax(0, 1fr)); 718 | } 719 | 720 | .transition-all { 721 | transition-property: all; 722 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 723 | transition-duration: 150ms; 724 | } 725 | 726 | .duration-500 { 727 | transition-duration: 500ms; 728 | } 729 | 730 | @-webkit-keyframes spin { 731 | to { 732 | transform: rotate(360deg); 733 | } 734 | } 735 | 736 | @keyframes spin { 737 | to { 738 | transform: rotate(360deg); 739 | } 740 | } 741 | 742 | @-webkit-keyframes ping { 743 | 75%, 100% { 744 | transform: scale(2); 745 | opacity: 0; 746 | } 747 | } 748 | 749 | @keyframes ping { 750 | 75%, 100% { 751 | transform: scale(2); 752 | opacity: 0; 753 | } 754 | } 755 | 756 | @-webkit-keyframes pulse { 757 | 50% { 758 | opacity: .5; 759 | } 760 | } 761 | 762 | @keyframes pulse { 763 | 50% { 764 | opacity: .5; 765 | } 766 | } 767 | 768 | @-webkit-keyframes bounce { 769 | 0%, 100% { 770 | transform: translateY(-25%); 771 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 772 | animation-timing-function: cubic-bezier(0.8,0,1,1); 773 | } 774 | 775 | 50% { 776 | transform: none; 777 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 778 | animation-timing-function: cubic-bezier(0,0,0.2,1); 779 | } 780 | } 781 | 782 | @keyframes bounce { 783 | 0%, 100% { 784 | transform: translateY(-25%); 785 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 786 | animation-timing-function: cubic-bezier(0.8,0,1,1); 787 | } 788 | 789 | 50% { 790 | transform: none; 791 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 792 | animation-timing-function: cubic-bezier(0,0,0.2,1); 793 | } 794 | } 795 | 796 | .sub-dropdown:hover>.sub-dropdown-content { 797 | opacity: 1; 798 | visibility: visible; 799 | top: 0; 800 | } 801 | 802 | .sub-dropdown:hover>a { 803 | background-color: #fff; 804 | color: #000; 805 | } 806 | 807 | @media (min-width: 640px) { 808 | } 809 | 810 | @media (min-width: 768px) { 811 | } 812 | 813 | @media (min-width: 1024px) { 814 | } 815 | 816 | @media (min-width: 1280px) { 817 | } 818 | 819 | @media (min-width: 1536px) { 820 | } -------------------------------------------------------------------------------- /static/tailwind/tailwind.min.css: -------------------------------------------------------------------------------- 1 | /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ 2 | 3 | /* 4 | Document 5 | ======== 6 | */ 7 | 8 | /** 9 | Use a better box model (opinionated). 10 | */ 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | box-sizing: border-box; 16 | } 17 | 18 | /** 19 | Use a more readable tab size (opinionated). 20 | */ 21 | 22 | :root { 23 | -moz-tab-size: 4; 24 | -o-tab-size: 4; 25 | tab-size: 4; 26 | } 27 | 28 | /** 29 | 1. Correct the line height in all browsers. 30 | 2. Prevent adjustments of font size after orientation changes in iOS. 31 | */ 32 | 33 | html { 34 | line-height: 1.15; /* 1 */ 35 | -webkit-text-size-adjust: 100%; /* 2 */ 36 | } 37 | 38 | /* 39 | Sections 40 | ======== 41 | */ 42 | 43 | /** 44 | Remove the margin in all browsers. 45 | */ 46 | 47 | body { 48 | margin: 0; 49 | } 50 | 51 | /** 52 | Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 53 | */ 54 | 55 | body { 56 | font-family: 57 | system-ui, 58 | -apple-system, /* Firefox supports this but not yet `system-ui` */ 59 | 'Segoe UI', 60 | Roboto, 61 | Helvetica, 62 | Arial, 63 | sans-serif, 64 | 'Apple Color Emoji', 65 | 'Segoe UI Emoji'; 66 | } 67 | 68 | /* 69 | Grouping content 70 | ================ 71 | */ 72 | 73 | /** 74 | 1. Add the correct height in Firefox. 75 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 76 | */ 77 | 78 | hr { 79 | height: 0; /* 1 */ 80 | color: inherit; /* 2 */ 81 | } 82 | 83 | /* 84 | Text-level semantics 85 | ==================== 86 | */ 87 | 88 | /** 89 | Add the correct text decoration in Chrome, Edge, and Safari. 90 | */ 91 | 92 | abbr[title] { 93 | -webkit-text-decoration: underline dotted; 94 | text-decoration: underline dotted; 95 | } 96 | 97 | /** 98 | Add the correct font weight in Edge and Safari. 99 | */ 100 | 101 | b, 102 | strong { 103 | font-weight: bolder; 104 | } 105 | 106 | /** 107 | 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 108 | 2. Correct the odd 'em' font sizing in all browsers. 109 | */ 110 | 111 | code, 112 | kbd, 113 | samp, 114 | pre { 115 | font-family: 116 | ui-monospace, 117 | SFMono-Regular, 118 | Consolas, 119 | 'Liberation Mono', 120 | Menlo, 121 | monospace; /* 1 */ 122 | font-size: 1em; /* 2 */ 123 | } 124 | 125 | /** 126 | Add the correct font size in all browsers. 127 | */ 128 | 129 | small { 130 | font-size: 80%; 131 | } 132 | 133 | /** 134 | Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. 135 | */ 136 | 137 | sub, 138 | sup { 139 | font-size: 75%; 140 | line-height: 0; 141 | position: relative; 142 | vertical-align: baseline; 143 | } 144 | 145 | sub { 146 | bottom: -0.25em; 147 | } 148 | 149 | sup { 150 | top: -0.5em; 151 | } 152 | 153 | /* 154 | Tabular data 155 | ============ 156 | */ 157 | 158 | /** 159 | 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) 160 | 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) 161 | */ 162 | 163 | table { 164 | text-indent: 0; /* 1 */ 165 | border-color: inherit; /* 2 */ 166 | } 167 | 168 | /* 169 | Forms 170 | ===== 171 | */ 172 | 173 | /** 174 | 1. Change the font styles in all browsers. 175 | 2. Remove the margin in Firefox and Safari. 176 | */ 177 | 178 | button, 179 | input, 180 | optgroup, 181 | select, 182 | textarea { 183 | font-family: inherit; /* 1 */ 184 | font-size: 100%; /* 1 */ 185 | line-height: 1.15; /* 1 */ 186 | margin: 0; /* 2 */ 187 | } 188 | 189 | /** 190 | Remove the inheritance of text transform in Edge and Firefox. 191 | 1. Remove the inheritance of text transform in Firefox. 192 | */ 193 | 194 | button, 195 | select { /* 1 */ 196 | text-transform: none; 197 | } 198 | 199 | /** 200 | Correct the inability to style clickable types in iOS and Safari. 201 | */ 202 | 203 | button { 204 | -webkit-appearance: button; 205 | } 206 | 207 | /** 208 | Remove the inner border and padding in Firefox. 209 | */ 210 | 211 | /** 212 | Restore the focus styles unset by the previous rule. 213 | */ 214 | 215 | /** 216 | Remove the additional ':invalid' styles in Firefox. 217 | See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 218 | */ 219 | 220 | /** 221 | Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. 222 | */ 223 | 224 | legend { 225 | padding: 0; 226 | } 227 | 228 | /** 229 | Add the correct vertical alignment in Chrome and Firefox. 230 | */ 231 | 232 | progress { 233 | vertical-align: baseline; 234 | } 235 | 236 | /** 237 | Correct the cursor style of increment and decrement buttons in Safari. 238 | */ 239 | 240 | /** 241 | 1. Correct the odd appearance in Chrome and Safari. 242 | 2. Correct the outline style in Safari. 243 | */ 244 | 245 | /** 246 | Remove the inner padding in Chrome and Safari on macOS. 247 | */ 248 | 249 | /** 250 | 1. Correct the inability to style clickable types in iOS and Safari. 251 | 2. Change font properties to 'inherit' in Safari. 252 | */ 253 | 254 | /* 255 | Interactive 256 | =========== 257 | */ 258 | 259 | /* 260 | Add the correct display in Chrome and Safari. 261 | */ 262 | 263 | summary { 264 | display: list-item; 265 | } 266 | 267 | /** 268 | * Manually forked from SUIT CSS Base: https://github.com/suitcss/base 269 | * A thin layer on top of normalize.css that provides a starting point more 270 | * suitable for web applications. 271 | */ 272 | 273 | /** 274 | * Removes the default spacing and border for appropriate elements. 275 | */ 276 | 277 | blockquote, 278 | dl, 279 | dd, 280 | h1, 281 | h2, 282 | h3, 283 | h4, 284 | h5, 285 | h6, 286 | hr, 287 | figure, 288 | p, 289 | pre { 290 | margin: 0; 291 | } 292 | 293 | button { 294 | background-color: transparent; 295 | background-image: none; 296 | } 297 | 298 | /** 299 | * Work around a Firefox/IE bug where the transparent `button` background 300 | * results in a loss of the default `button` focus styles. 301 | */ 302 | 303 | button:focus { 304 | outline: 1px dotted; 305 | outline: 5px auto -webkit-focus-ring-color; 306 | } 307 | 308 | fieldset { 309 | margin: 0; 310 | padding: 0; 311 | } 312 | 313 | ol, 314 | ul { 315 | list-style: none; 316 | margin: 0; 317 | padding: 0; 318 | } 319 | 320 | /** 321 | * Tailwind custom reset styles 322 | */ 323 | 324 | /** 325 | * 1. Use the user's configured `sans` font-family (with Tailwind's default 326 | * sans-serif font stack as a fallback) as a sane default. 327 | * 2. Use Tailwind's default "normal" line-height so the user isn't forced 328 | * to override it to ensure consistency even when using the default theme. 329 | */ 330 | 331 | html { 332 | font-family: Oswald, sans-serif; /* 1 */ 333 | line-height: 1.5; /* 2 */ 334 | } 335 | 336 | /** 337 | * Inherit font-family and line-height from `html` so users can set them as 338 | * a class directly on the `html` element. 339 | */ 340 | 341 | body { 342 | font-family: inherit; 343 | line-height: inherit; 344 | } 345 | 346 | /** 347 | * 1. Prevent padding and border from affecting element width. 348 | * 349 | * We used to set this in the html element and inherit from 350 | * the parent element for everything else. This caused issues 351 | * in shadow-dom-enhanced elements like
where the content 352 | * is wrapped by a div with box-sizing set to `content-box`. 353 | * 354 | * https://github.com/mozdevs/cssremedy/issues/4 355 | * 356 | * 357 | * 2. Allow adding a border to an element by just adding a border-width. 358 | * 359 | * By default, the way the browser specifies that an element should have no 360 | * border is by setting it's border-style to `none` in the user-agent 361 | * stylesheet. 362 | * 363 | * In order to easily add borders to elements by just setting the `border-width` 364 | * property, we change the default border-style for all elements to `solid`, and 365 | * use border-width to hide them instead. This way our `border` utilities only 366 | * need to set the `border-width` property instead of the entire `border` 367 | * shorthand, making our border utilities much more straightforward to compose. 368 | * 369 | * https://github.com/tailwindcss/tailwindcss/pull/116 370 | */ 371 | 372 | *, 373 | ::before, 374 | ::after { 375 | box-sizing: border-box; /* 1 */ 376 | border-width: 0; /* 2 */ 377 | border-style: solid; /* 2 */ 378 | border-color: #e5e7eb; /* 2 */ 379 | } 380 | 381 | /* 382 | * Ensure horizontal rules are visible by default 383 | */ 384 | 385 | hr { 386 | border-top-width: 1px; 387 | } 388 | 389 | /** 390 | * Undo the `border-style: none` reset that Normalize applies to images so that 391 | * our `border-{width}` utilities have the expected effect. 392 | * 393 | * The Normalize reset is unnecessary for us since we default the border-width 394 | * to 0 on all elements. 395 | * 396 | * https://github.com/tailwindcss/tailwindcss/issues/362 397 | */ 398 | 399 | img { 400 | border-style: solid; 401 | } 402 | 403 | textarea { 404 | resize: vertical; 405 | } 406 | 407 | input::-moz-placeholder, textarea::-moz-placeholder { 408 | color: #9ca3af; 409 | } 410 | 411 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { 412 | color: #9ca3af; 413 | } 414 | 415 | input::placeholder, 416 | textarea::placeholder { 417 | color: #9ca3af; 418 | } 419 | 420 | button { 421 | cursor: pointer; 422 | } 423 | 424 | table { 425 | border-collapse: collapse; 426 | } 427 | 428 | h1, 429 | h2, 430 | h3, 431 | h4, 432 | h5, 433 | h6 { 434 | font-size: inherit; 435 | font-weight: inherit; 436 | } 437 | 438 | /** 439 | * Reset links to optimize for opt-in styling instead of 440 | * opt-out. 441 | */ 442 | 443 | a { 444 | color: inherit; 445 | text-decoration: inherit; 446 | } 447 | 448 | /** 449 | * Reset form element properties that are easy to forget to 450 | * style explicitly so you don't inadvertently introduce 451 | * styles that deviate from your design system. These styles 452 | * supplement a partial reset that is already applied by 453 | * normalize.css. 454 | */ 455 | 456 | button, 457 | input, 458 | optgroup, 459 | select, 460 | textarea { 461 | padding: 0; 462 | line-height: inherit; 463 | color: inherit; 464 | } 465 | 466 | /** 467 | * Use the configured 'mono' font family for elements that 468 | * are expected to be rendered with a monospace font, falling 469 | * back to the system monospace stack if there is no configured 470 | * 'mono' font family. 471 | */ 472 | 473 | pre, 474 | code, 475 | kbd, 476 | samp { 477 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 478 | } 479 | 480 | /** 481 | * Make replaced elements `display: block` by default as that's 482 | * the behavior you want almost all of the time. Inspired by 483 | * CSS Remedy, with `svg` added as well. 484 | * 485 | * https://github.com/mozdevs/cssremedy/issues/14 486 | */ 487 | 488 | img, 489 | svg, 490 | video, 491 | canvas, 492 | audio, 493 | iframe, 494 | embed, 495 | object { 496 | display: block; 497 | vertical-align: middle; 498 | } 499 | 500 | /** 501 | * Constrain images and videos to the parent width and preserve 502 | * their instrinsic aspect ratio. 503 | * 504 | * https://github.com/mozdevs/cssremedy/issues/14 505 | */ 506 | 507 | img, 508 | video { 509 | max-width: 100%; 510 | height: auto; 511 | } 512 | 513 | .menu-item { 514 | --tw-border-opacity: 1; 515 | border-color: rgba(0, 0, 0, var(--tw-border-opacity)); 516 | } 517 | 518 | .menu-item:hover { 519 | --tw-border-opacity: 1; 520 | border-color: rgba(255, 255, 255, var(--tw-border-opacity)); 521 | } 522 | 523 | .menu-item { 524 | border-bottom-width: 4px; 525 | display: inline-block; 526 | padding: 1.25rem; 527 | } 528 | 529 | .mega-sub-item:hover { 530 | --tw-bg-opacity: 1; 531 | background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); 532 | } 533 | 534 | .mega-sub-item { 535 | cursor: pointer; 536 | display: block; 537 | padding: 0.5rem; 538 | } 539 | 540 | .mega-sub-item:hover { 541 | --tw-text-opacity: 1; 542 | color: rgba(0, 0, 0, var(--tw-text-opacity)); 543 | } 544 | 545 | .mega-sub-item-title { 546 | display: block; 547 | font-weight: 600; 548 | font-size: 1.25rem; 549 | line-height: 1.75rem; 550 | margin-bottom: 1.25rem; 551 | } 552 | 553 | .menu-sub-item:hover { 554 | --tw-bg-opacity: 1; 555 | background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); 556 | } 557 | 558 | .menu-sub-item { 559 | display: block; 560 | padding-top: 0.5rem; 561 | padding-bottom: 0.5rem; 562 | padding-left: 1.75rem; 563 | padding-right: 1.75rem; 564 | } 565 | 566 | .menu-sub-item:hover { 567 | --tw-text-opacity: 1; 568 | color: rgba(0, 0, 0, var(--tw-text-opacity)); 569 | } 570 | 571 | .bg-black { 572 | --tw-bg-opacity: 1; 573 | background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); 574 | } 575 | 576 | .bg-gray-300 { 577 | --tw-bg-opacity: 1; 578 | background-color: rgba(209, 213, 219, var(--tw-bg-opacity)); 579 | } 580 | 581 | .group:hover .group-hover\:border-white { 582 | --tw-border-opacity: 1; 583 | border-color: rgba(255, 255, 255, var(--tw-border-opacity)); 584 | } 585 | 586 | .flex { 587 | display: flex; 588 | } 589 | 590 | .table { 591 | display: table; 592 | } 593 | 594 | .grid { 595 | display: grid; 596 | } 597 | 598 | .items-center { 599 | align-items: center; 600 | } 601 | 602 | .justify-between { 603 | justify-content: space-between; 604 | } 605 | 606 | .font-sans { 607 | font-family: Oswald, sans-serif; 608 | } 609 | 610 | .font-semibold { 611 | font-weight: 600; 612 | } 613 | 614 | .font-bold { 615 | font-weight: 700; 616 | } 617 | 618 | .h-screen { 619 | height: 100vh; 620 | } 621 | 622 | .text-3xl { 623 | font-size: 1.875rem; 624 | line-height: 2.25rem; 625 | } 626 | 627 | .mx-auto { 628 | margin-left: auto; 629 | margin-right: auto; 630 | } 631 | 632 | .mt-14 { 633 | margin-top: 3.5rem; 634 | } 635 | 636 | .group:hover .group-hover\:mt-0 { 637 | margin-top: 0px; 638 | } 639 | 640 | .max-w-7xl { 641 | max-width: 80rem; 642 | } 643 | 644 | .opacity-0 { 645 | opacity: 0; 646 | } 647 | 648 | .group:hover .group-hover\:opacity-100 { 649 | opacity: 1; 650 | } 651 | 652 | .p-2 { 653 | padding: 0.5rem; 654 | } 655 | 656 | .p-5 { 657 | padding: 1.25rem; 658 | } 659 | 660 | .absolute { 661 | position: absolute; 662 | } 663 | 664 | .relative { 665 | position: relative; 666 | } 667 | 668 | .left-0 { 669 | left: 0px; 670 | } 671 | 672 | .top-full { 673 | top: 100%; 674 | } 675 | 676 | .left-full { 677 | left: 100%; 678 | } 679 | 680 | * { 681 | --tw-shadow: 0 0 #0000; 682 | } 683 | 684 | * { 685 | --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); 686 | --tw-ring-offset-width: 0px; 687 | --tw-ring-offset-color: #fff; 688 | --tw-ring-color: rgba(59, 130, 246, 0.5); 689 | --tw-ring-offset-shadow: 0 0 #0000; 690 | --tw-ring-shadow: 0 0 #0000; 691 | } 692 | 693 | .text-white { 694 | --tw-text-opacity: 1; 695 | color: rgba(255, 255, 255, var(--tw-text-opacity)); 696 | } 697 | 698 | .invisible { 699 | visibility: hidden; 700 | } 701 | 702 | .group:hover .group-hover\:visible { 703 | visibility: visible; 704 | } 705 | 706 | .w-full { 707 | width: 100%; 708 | } 709 | 710 | .w-max { 711 | width: -webkit-max-content; 712 | width: -moz-max-content; 713 | width: max-content; 714 | } 715 | 716 | .grid-cols-4 { 717 | grid-template-columns: repeat(4, minmax(0, 1fr)); 718 | } 719 | 720 | .transition-all { 721 | transition-property: all; 722 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 723 | transition-duration: 150ms; 724 | } 725 | 726 | .duration-500 { 727 | transition-duration: 500ms; 728 | } 729 | 730 | @-webkit-keyframes spin { 731 | to { 732 | transform: rotate(360deg); 733 | } 734 | } 735 | 736 | @keyframes spin { 737 | to { 738 | transform: rotate(360deg); 739 | } 740 | } 741 | 742 | @-webkit-keyframes ping { 743 | 75%, 100% { 744 | transform: scale(2); 745 | opacity: 0; 746 | } 747 | } 748 | 749 | @keyframes ping { 750 | 75%, 100% { 751 | transform: scale(2); 752 | opacity: 0; 753 | } 754 | } 755 | 756 | @-webkit-keyframes pulse { 757 | 50% { 758 | opacity: .5; 759 | } 760 | } 761 | 762 | @keyframes pulse { 763 | 50% { 764 | opacity: .5; 765 | } 766 | } 767 | 768 | @-webkit-keyframes bounce { 769 | 0%, 100% { 770 | transform: translateY(-25%); 771 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 772 | animation-timing-function: cubic-bezier(0.8,0,1,1); 773 | } 774 | 775 | 50% { 776 | transform: none; 777 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 778 | animation-timing-function: cubic-bezier(0,0,0.2,1); 779 | } 780 | } 781 | 782 | @keyframes bounce { 783 | 0%, 100% { 784 | transform: translateY(-25%); 785 | -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); 786 | animation-timing-function: cubic-bezier(0.8,0,1,1); 787 | } 788 | 789 | 50% { 790 | transform: none; 791 | -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); 792 | animation-timing-function: cubic-bezier(0,0,0.2,1); 793 | } 794 | } 795 | 796 | .sub-dropdown:hover>.sub-dropdown-content { 797 | opacity: 1; 798 | visibility: visible; 799 | top: 0; 800 | } 801 | 802 | .sub-dropdown:hover>a { 803 | background-color: #fff; 804 | color: #000; 805 | } 806 | 807 | @media (min-width: 640px) { 808 | } 809 | 810 | @media (min-width: 768px) { 811 | } 812 | 813 | @media (min-width: 1024px) { 814 | } 815 | 816 | @media (min-width: 1280px) { 817 | } 818 | 819 | @media (min-width: 1536px) { 820 | } --------------------------------------------------------------------------------