├── .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 | }
--------------------------------------------------------------------------------