- {timelineData.map((item, index) => (
+ {experience.map((item, index) => (
= 40rem) {
+ max-width: 40rem;
+ }
+ @media (width >= 48rem) {
+ max-width: 48rem;
+ }
+ @media (width >= 64rem) {
+ max-width: 64rem;
+ }
+ @media (width >= 80rem) {
+ max-width: 80rem;
+ }
+ @media (width >= 96rem) {
+ max-width: 96rem;
+ }
}
-}
-
-@media (min-width: 768px) {
- .container {
- max-width: 768px;
+ .m-0 {
+ margin: calc(var(--spacing) * 0);
}
-}
-
-@media (min-width: 1024px) {
- .container {
- max-width: 1024px;
+ .m-1 {
+ margin: calc(var(--spacing) * 1);
}
-}
-
-@media (min-width: 1280px) {
- .container {
- max-width: 1280px;
+ .m-4 {
+ margin: calc(var(--spacing) * 4);
}
-}
-
-@media (min-width: 1536px) {
- .container {
- max-width: 1536px;
+ .mx-auto {
+ margin-inline: auto;
}
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border-width: 0;
-}
-
-.fixed {
- position: fixed;
-}
-
-.bottom-5 {
- bottom: 1.25rem;
-}
-
-.right-16 {
- right: 4rem;
-}
-
-.right-5 {
- right: 1.25rem;
-}
-
-.top-0 {
- top: 0px;
-}
-
-.z-50 {
- z-index: 50;
-}
-
-.m-0 {
- margin: 0px;
-}
-
-.m-1 {
- margin: 0.25rem;
-}
-
-.m-4 {
- margin: 1rem;
-}
-
-.mx-auto {
- margin-left: auto;
- margin-right: auto;
-}
-
-.my-4 {
- margin-top: 1rem;
- margin-bottom: 1rem;
-}
-
-.mb-1 {
- margin-bottom: 0.25rem;
-}
-
-.mb-4 {
- margin-bottom: 1rem;
-}
-
-.mb-8 {
- margin-bottom: 2rem;
-}
-
-.mt-16 {
- margin-top: 4rem;
-}
-
-.mt-2 {
- margin-top: 0.5rem;
-}
-
-.mt-3 {
- margin-top: 0.75rem;
-}
-
-.mt-4 {
- margin-top: 1rem;
-}
-
-.mt-5 {
- margin-top: 1.25rem;
-}
-
-.mt-8 {
- margin-top: 2rem;
-}
-
-.inline-block {
- display: inline-block;
-}
-
-.inline {
- display: inline;
-}
-
-.flex {
- display: flex;
-}
-
-.h-64 {
- height: 16rem;
-}
-
-.min-h-screen {
- min-height: 100vh;
-}
-
-.w-32 {
- width: 8rem;
-}
-
-.w-40 {
- width: 10rem;
-}
-
-.w-64 {
- width: 16rem;
-}
-
-.w-auto {
- width: auto;
-}
-
-.w-full {
- width: 100%;
-}
-
-.max-w-4xl {
- max-width: 56rem;
-}
-
-.max-w-xs {
- max-width: 20rem;
-}
-
-.flex-none {
- flex: none;
-}
-
-.cursor-pointer {
- cursor: pointer;
-}
-
-.resize {
- resize: both;
-}
-
-.flex-row {
- flex-direction: row;
-}
-
-.flex-col {
- flex-direction: column;
-}
-
-.flex-wrap {
- flex-wrap: wrap;
-}
-
-.items-center {
- align-items: center;
-}
-
-.justify-center {
- justify-content: center;
-}
-
-.justify-around {
- justify-content: space-around;
-}
-
-.gap-1 {
- gap: 0.25rem;
-}
-
-.gap-2 {
- gap: 0.5rem;
-}
-
-.gap-4 {
- gap: 1rem;
-}
-
-.gap-5 {
- gap: 1.25rem;
-}
-
-.rounded-full {
- border-radius: 9999px;
-}
-
-.rounded-xl {
- border-radius: 0.75rem;
-}
-
-.border {
- border-width: 1px;
-}
-
-.border-2 {
- border-width: 2px;
-}
-
-.border-b-2 {
- border-bottom-width: 2px;
-}
-
-.border-t {
- border-top-width: 1px;
-}
-
-.border-gray-300 {
- --tw-border-opacity: 1;
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
-.bg-gray-100 {
- --tw-bg-opacity: 1;
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.bg-gray-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.bg-white {
- --tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.p-1 {
- padding: 0.25rem;
-}
-
-.p-2 {
- padding: 0.5rem;
-}
-
-.p-3 {
- padding: 0.75rem;
-}
-
-.p-4 {
- padding: 1rem;
-}
-
-.p-5 {
- padding: 1.25rem;
-}
-
-.p-6 {
- padding: 1.5rem;
-}
-
-.px-3 {
- padding-left: 0.75rem;
- padding-right: 0.75rem;
-}
-
-.px-4 {
- padding-left: 1rem;
- padding-right: 1rem;
-}
-
-.px-5 {
- padding-left: 1.25rem;
- padding-right: 1.25rem;
-}
-
-.py-1 {
- padding-top: 0.25rem;
- padding-bottom: 0.25rem;
-}
-
-.py-10 {
- padding-top: 2.5rem;
- padding-bottom: 2.5rem;
-}
-
-.pb-4 {
- padding-bottom: 1rem;
-}
-
-.pt-2 {
- padding-top: 0.5rem;
-}
-
-.text-left {
- text-align: left;
-}
-
-.text-center {
- text-align: center;
-}
-
-.align-baseline {
- vertical-align: baseline;
-}
-
-.text-2xl {
- font-size: 1.5rem;
- line-height: 2rem;
-}
-
-.text-4xl {
- font-size: 2.25rem;
- line-height: 2.5rem;
-}
-
-.text-base {
- font-size: 1rem;
- line-height: 1.5rem;
-}
-
-.text-sm {
- font-size: 0.875rem;
- line-height: 1.25rem;
-}
-
-.text-xl {
- font-size: 1.25rem;
- line-height: 1.75rem;
-}
-
-.text-xs {
- font-size: 0.75rem;
- line-height: 1rem;
-}
-
-.font-bold {
- font-weight: 700;
-}
-
-.font-extrabold {
- font-weight: 800;
-}
-
-.font-medium {
- font-weight: 500;
-}
-
-.font-semibold {
- font-weight: 600;
-}
-
-.leading-relaxed {
- line-height: 1.625;
-}
-
-.text-gray-200 {
- --tw-text-opacity: 1;
- color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.text-gray-600 {
- --tw-text-opacity: 1;
- color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.text-gray-800 {
- --tw-text-opacity: 1;
- color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
-.text-gray-900 {
- --tw-text-opacity: 1;
- color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
-.text-red-500 {
- --tw-text-opacity: 1;
- color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
-.shadow-md {
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-xl {
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-gray-800 {
- --tw-shadow-color: #1f2937;
- --tw-shadow: var(--tw-shadow-colored);
-}
-
-.transition {
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
-}
-
-.transition-colors {
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
-}
-
-.transition-shadow {
- transition-property: box-shadow;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
-}
-
-.duration-300 {
- transition-duration: 300ms;
-}
-
-.ease-in-out {
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.hover\:bg-gray-800:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.hover\:text-white:hover {
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.hover\:shadow-lg:hover {
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.dark\:border-gray-700:is(.dark *) {
- --tw-border-opacity: 1;
- border-color: rgb(55 65 81 / var(--tw-border-opacity));
-}
-
-.dark\:bg-gray-800:is(.dark *) {
- --tw-bg-opacity: 1;
- background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.dark\:bg-gray-900:is(.dark *) {
- --tw-bg-opacity: 1;
- background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.dark\:text-gray-200:is(.dark *) {
- --tw-text-opacity: 1;
- color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.dark\:text-gray-300:is(.dark *) {
- --tw-text-opacity: 1;
- color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.dark\:text-gray-400:is(.dark *) {
- --tw-text-opacity: 1;
- color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.dark\:text-white:is(.dark *) {
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.dark\:shadow-gray-200:is(.dark *) {
- --tw-shadow-color: #e5e7eb;
- --tw-shadow: var(--tw-shadow-colored);
-}
-
-.dark\:hover\:bg-gray-200:hover:is(.dark *) {
- --tw-bg-opacity: 1;
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.dark\:hover\:bg-opacity-20:hover:is(.dark *) {
- --tw-bg-opacity: 0.2;
-}
-
-.dark\:hover\:text-gray-800:hover:is(.dark *) {
- --tw-text-opacity: 1;
- color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
-@media (min-width: 640px) {
- .sm\:m-2 {
- margin: 0.5rem;
+ .my-4 {
+ margin-block: calc(var(--spacing) * 4);
}
-
- .sm\:w-5\/12 {
- width: 41.666667%;
+ .mt-1\.5 {
+ margin-top: calc(var(--spacing) * 1.5);
}
-
- .sm\:p-2 {
- padding: 0.5rem;
+ .mt-2 {
+ margin-top: calc(var(--spacing) * 2);
}
-
- .sm\:text-2xl {
- font-size: 1.5rem;
- line-height: 2rem;
+ .mt-3 {
+ margin-top: calc(var(--spacing) * 3);
}
-
- .sm\:text-base {
- font-size: 1rem;
- line-height: 1.5rem;
+ .mt-4 {
+ margin-top: calc(var(--spacing) * 4);
}
-}
-
-@media (min-width: 768px) {
- .md\:h-96 {
- height: 24rem;
+ .mt-5 {
+ margin-top: calc(var(--spacing) * 5);
}
-
- .md\:w-3\/4 {
- width: 75%;
+ .mt-8 {
+ margin-top: calc(var(--spacing) * 8);
}
-
- .md\:text-center {
+ .mt-16 {
+ margin-top: calc(var(--spacing) * 16);
+ }
+ .mr-1 {
+ margin-right: calc(var(--spacing) * 1);
+ }
+ .mr-2 {
+ margin-right: calc(var(--spacing) * 2);
+ }
+ .mb-1 {
+ margin-bottom: calc(var(--spacing) * 1);
+ }
+ .mb-2 {
+ margin-bottom: calc(var(--spacing) * 2);
+ }
+ .mb-3 {
+ margin-bottom: calc(var(--spacing) * 3);
+ }
+ .mb-4 {
+ margin-bottom: calc(var(--spacing) * 4);
+ }
+ .mb-6 {
+ margin-bottom: calc(var(--spacing) * 6);
+ }
+ .mb-8 {
+ margin-bottom: calc(var(--spacing) * 8);
+ }
+ .mb-12 {
+ margin-bottom: calc(var(--spacing) * 12);
+ }
+ .block {
+ display: block;
+ }
+ .contents {
+ display: contents;
+ }
+ .flex {
+ display: flex;
+ }
+ .grid {
+ display: grid;
+ }
+ .inline {
+ display: inline;
+ }
+ .inline-block {
+ display: inline-block;
+ }
+ .h-1 {
+ height: calc(var(--spacing) * 1);
+ }
+ .h-3 {
+ height: calc(var(--spacing) * 3);
+ }
+ .h-6 {
+ height: calc(var(--spacing) * 6);
+ }
+ .h-8 {
+ height: calc(var(--spacing) * 8);
+ }
+ .h-20 {
+ height: calc(var(--spacing) * 20);
+ }
+ .h-64 {
+ height: calc(var(--spacing) * 64);
+ }
+ .h-full {
+ height: 100%;
+ }
+ .min-h-screen {
+ min-height: 100vh;
+ }
+ .w-0\.5 {
+ width: calc(var(--spacing) * 0.5);
+ }
+ .w-1 {
+ width: calc(var(--spacing) * 1);
+ }
+ .w-1\/3 {
+ width: calc(1/3 * 100%);
+ }
+ .w-3 {
+ width: calc(var(--spacing) * 3);
+ }
+ .w-6 {
+ width: calc(var(--spacing) * 6);
+ }
+ .w-32 {
+ width: calc(var(--spacing) * 32);
+ }
+ .w-40 {
+ width: calc(var(--spacing) * 40);
+ }
+ .w-64 {
+ width: calc(var(--spacing) * 64);
+ }
+ .w-auto {
+ width: auto;
+ }
+ .w-full {
+ width: 100%;
+ }
+ .max-w-3xl {
+ max-width: var(--container-3xl);
+ }
+ .max-w-4xl {
+ max-width: var(--container-4xl);
+ }
+ .max-w-6xl {
+ max-width: var(--container-6xl);
+ }
+ .max-w-xs {
+ max-width: var(--container-xs);
+ }
+ .flex-none {
+ flex: none;
+ }
+ .-translate-x-1\/2 {
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ .animate-bounce {
+ animation: var(--animate-bounce);
+ }
+ .animate-pulse {
+ animation: var(--animate-pulse);
+ }
+ .animate-spin {
+ animation: var(--animate-spin);
+ }
+ .cursor-not-allowed {
+ cursor: not-allowed;
+ }
+ .cursor-pointer {
+ cursor: pointer;
+ }
+ .resize {
+ resize: both;
+ }
+ .resize-none {
+ resize: none;
+ }
+ .grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+ .grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ .grid-cols-12 {
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ }
+ .flex-col {
+ flex-direction: column;
+ }
+ .flex-row {
+ flex-direction: row;
+ }
+ .flex-wrap {
+ flex-wrap: wrap;
+ }
+ .items-center {
+ align-items: center;
+ }
+ .items-start {
+ align-items: flex-start;
+ }
+ .justify-around {
+ justify-content: space-around;
+ }
+ .justify-between {
+ justify-content: space-between;
+ }
+ .justify-center {
+ justify-content: center;
+ }
+ .gap-1 {
+ gap: calc(var(--spacing) * 1);
+ }
+ .gap-2 {
+ gap: calc(var(--spacing) * 2);
+ }
+ .gap-3 {
+ gap: calc(var(--spacing) * 3);
+ }
+ .gap-4 {
+ gap: calc(var(--spacing) * 4);
+ }
+ .gap-5 {
+ gap: calc(var(--spacing) * 5);
+ }
+ .gap-6 {
+ gap: calc(var(--spacing) * 6);
+ }
+ .gap-12 {
+ gap: calc(var(--spacing) * 12);
+ }
+ .space-y-1 {
+ :where(& > :not(:last-child)) {
+ --tw-space-y-reverse: 0;
+ margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+ margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+ }
+ }
+ .space-y-4 {
+ :where(& > :not(:last-child)) {
+ --tw-space-y-reverse: 0;
+ margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+ margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+ }
+ }
+ .space-y-6 {
+ :where(& > :not(:last-child)) {
+ --tw-space-y-reverse: 0;
+ margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+ }
+ }
+ .space-y-8 {
+ :where(& > :not(:last-child)) {
+ --tw-space-y-reverse: 0;
+ margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+ margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+ }
+ }
+ .space-x-1 {
+ :where(& > :not(:last-child)) {
+ --tw-space-x-reverse: 0;
+ margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
+ margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
+ }
+ }
+ .space-x-2 {
+ :where(& > :not(:last-child)) {
+ --tw-space-x-reverse: 0;
+ margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+ margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+ }
+ }
+ .space-x-3 {
+ :where(& > :not(:last-child)) {
+ --tw-space-x-reverse: 0;
+ margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
+ margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
+ }
+ }
+ .space-x-4 {
+ :where(& > :not(:last-child)) {
+ --tw-space-x-reverse: 0;
+ margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+ }
+ }
+ .overflow-hidden {
+ overflow: hidden;
+ }
+ .rounded {
+ border-radius: 0.25rem;
+ }
+ .rounded-full {
+ border-radius: calc(infinity * 1px);
+ }
+ .rounded-lg {
+ border-radius: var(--radius-lg);
+ }
+ .rounded-md {
+ border-radius: var(--radius-md);
+ }
+ .rounded-sm {
+ border-radius: var(--radius-sm);
+ }
+ .rounded-xl {
+ border-radius: var(--radius-xl);
+ }
+ .border {
+ border-style: var(--tw-border-style);
+ border-width: 1px;
+ }
+ .border-2 {
+ border-style: var(--tw-border-style);
+ border-width: 2px;
+ }
+ .border-t {
+ border-top-style: var(--tw-border-style);
+ border-top-width: 1px;
+ }
+ .border-b-2 {
+ border-bottom-style: var(--tw-border-style);
+ border-bottom-width: 2px;
+ }
+ .border-l-4 {
+ border-left-style: var(--tw-border-style);
+ border-left-width: 4px;
+ }
+ .border-gray-300 {
+ border-color: var(--color-gray-300);
+ }
+ .border-l-blue-500 {
+ border-left-color: var(--color-blue-500);
+ }
+ .border-l-gray-500 {
+ border-left-color: var(--color-gray-500);
+ }
+ .border-l-green-500 {
+ border-left-color: var(--color-green-500);
+ }
+ .border-l-purple-500 {
+ border-left-color: var(--color-purple-500);
+ }
+ .bg-blue-50 {
+ background-color: var(--color-blue-50);
+ }
+ .bg-blue-100 {
+ background-color: var(--color-blue-100);
+ }
+ .bg-blue-600 {
+ background-color: var(--color-blue-600);
+ }
+ .bg-gray-50 {
+ background-color: var(--color-gray-50);
+ }
+ .bg-gray-100 {
+ background-color: var(--color-gray-100);
+ }
+ .bg-gray-200 {
+ background-color: var(--color-gray-200);
+ }
+ .bg-gray-300 {
+ background-color: var(--color-gray-300);
+ }
+ .bg-gray-400 {
+ background-color: var(--color-gray-400);
+ }
+ .bg-gray-500 {
+ background-color: var(--color-gray-500);
+ }
+ .bg-gray-600 {
+ background-color: var(--color-gray-600);
+ }
+ .bg-green-50 {
+ background-color: var(--color-green-50);
+ }
+ .bg-green-100 {
+ background-color: var(--color-green-100);
+ }
+ .bg-green-200 {
+ background-color: var(--color-green-200);
+ }
+ .bg-green-300 {
+ background-color: var(--color-green-300);
+ }
+ .bg-green-500 {
+ background-color: var(--color-green-500);
+ }
+ .bg-purple-50 {
+ background-color: var(--color-purple-50);
+ }
+ .bg-red-100 {
+ background-color: var(--color-red-100);
+ }
+ .bg-red-500 {
+ background-color: var(--color-red-500);
+ }
+ .bg-white {
+ background-color: var(--color-white);
+ }
+ .bg-yellow-500 {
+ background-color: var(--color-yellow-500);
+ }
+ .bg-gradient-to-br {
+ --tw-gradient-position: to bottom right in oklab;
+ background-image: linear-gradient(var(--tw-gradient-stops));
+ }
+ .bg-gradient-to-r {
+ --tw-gradient-position: to right in oklab;
+ background-image: linear-gradient(var(--tw-gradient-stops));
+ }
+ .from-blue-500 {
+ --tw-gradient-from: var(--color-blue-500);
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+ }
+ .from-blue-900 {
+ --tw-gradient-from: var(--color-blue-900);
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+ }
+ .via-purple-900 {
+ --tw-gradient-via: var(--color-purple-900);
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
+ }
+ .to-indigo-900 {
+ --tw-gradient-to: var(--color-indigo-900);
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+ }
+ .to-purple-500 {
+ --tw-gradient-to: var(--color-purple-500);
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+ }
+ .p-1 {
+ padding: calc(var(--spacing) * 1);
+ }
+ .p-2 {
+ padding: calc(var(--spacing) * 2);
+ }
+ .p-3 {
+ padding: calc(var(--spacing) * 3);
+ }
+ .p-4 {
+ padding: calc(var(--spacing) * 4);
+ }
+ .p-5 {
+ padding: calc(var(--spacing) * 5);
+ }
+ .p-6 {
+ padding: calc(var(--spacing) * 6);
+ }
+ .p-8 {
+ padding: calc(var(--spacing) * 8);
+ }
+ .px-2 {
+ padding-inline: calc(var(--spacing) * 2);
+ }
+ .px-3 {
+ padding-inline: calc(var(--spacing) * 3);
+ }
+ .px-4 {
+ padding-inline: calc(var(--spacing) * 4);
+ }
+ .px-5 {
+ padding-inline: calc(var(--spacing) * 5);
+ }
+ .px-6 {
+ padding-inline: calc(var(--spacing) * 6);
+ }
+ .py-1 {
+ padding-block: calc(var(--spacing) * 1);
+ }
+ .py-2 {
+ padding-block: calc(var(--spacing) * 2);
+ }
+ .py-3 {
+ padding-block: calc(var(--spacing) * 3);
+ }
+ .py-10 {
+ padding-block: calc(var(--spacing) * 10);
+ }
+ .pt-2 {
+ padding-top: calc(var(--spacing) * 2);
+ }
+ .pb-4 {
+ padding-bottom: calc(var(--spacing) * 4);
+ }
+ .pl-12 {
+ padding-left: calc(var(--spacing) * 12);
+ }
+ .text-center {
text-align: center;
}
-
+ .text-left {
+ text-align: left;
+ }
+ .align-baseline {
+ vertical-align: baseline;
+ }
+ .text-2xl {
+ font-size: var(--text-2xl);
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
+ }
+ .text-3xl {
+ font-size: var(--text-3xl);
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
+ }
+ .text-4xl {
+ font-size: var(--text-4xl);
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
+ }
+ .text-base {
+ font-size: var(--text-base);
+ line-height: var(--tw-leading, var(--text-base--line-height));
+ }
+ .text-lg {
+ font-size: var(--text-lg);
+ line-height: var(--tw-leading, var(--text-lg--line-height));
+ }
+ .text-sm {
+ font-size: var(--text-sm);
+ line-height: var(--tw-leading, var(--text-sm--line-height));
+ }
+ .text-xl {
+ font-size: var(--text-xl);
+ line-height: var(--tw-leading, var(--text-xl--line-height));
+ }
+ .text-xs {
+ font-size: var(--text-xs);
+ line-height: var(--tw-leading, var(--text-xs--line-height));
+ }
+ .leading-relaxed {
+ --tw-leading: var(--leading-relaxed);
+ line-height: var(--leading-relaxed);
+ }
+ .font-bold {
+ --tw-font-weight: var(--font-weight-bold);
+ font-weight: var(--font-weight-bold);
+ }
+ .font-extrabold {
+ --tw-font-weight: var(--font-weight-extrabold);
+ font-weight: var(--font-weight-extrabold);
+ }
+ .font-medium {
+ --tw-font-weight: var(--font-weight-medium);
+ font-weight: var(--font-weight-medium);
+ }
+ .font-semibold {
+ --tw-font-weight: var(--font-weight-semibold);
+ font-weight: var(--font-weight-semibold);
+ }
+ .text-blue-500 {
+ color: var(--color-blue-500);
+ }
+ .text-blue-800 {
+ color: var(--color-blue-800);
+ }
+ .text-gray-200 {
+ color: var(--color-gray-200);
+ }
+ .text-gray-500 {
+ color: var(--color-gray-500);
+ }
+ .text-gray-600 {
+ color: var(--color-gray-600);
+ }
+ .text-gray-700 {
+ color: var(--color-gray-700);
+ }
+ .text-gray-800 {
+ color: var(--color-gray-800);
+ }
+ .text-gray-900 {
+ color: var(--color-gray-900);
+ }
+ .text-green-500 {
+ color: var(--color-green-500);
+ }
+ .text-green-800 {
+ color: var(--color-green-800);
+ }
+ .text-orange-500 {
+ color: var(--color-orange-500);
+ }
+ .text-purple-500 {
+ color: var(--color-purple-500);
+ }
+ .text-red-500 {
+ color: var(--color-red-500);
+ }
+ .text-red-800 {
+ color: var(--color-red-800);
+ }
+ .text-white {
+ color: var(--color-white);
+ }
+ .text-white\/80 {
+ color: color-mix(in srgb, #fff 80%, transparent);
+ @supports (color: color-mix(in lab, red, red)) {
+ color: color-mix(in oklab, var(--color-white) 80%, transparent);
+ }
+ }
+ .text-yellow-500 {
+ color: var(--color-yellow-500);
+ }
+ .opacity-0 {
+ opacity: 0%;
+ }
+ .shadow-lg {
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ }
+ .shadow-md {
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ }
+ .shadow-sm {
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ }
+ .shadow-xl {
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ }
+ .shadow-gray-800 {
+ --tw-shadow-color: oklch(27.8% 0.033 256.848);
+ @supports (color: color-mix(in lab, red, red)) {
+ --tw-shadow-color: color-mix(in oklab, var(--color-gray-800) var(--tw-shadow-alpha), transparent);
+ }
+ }
+ .backdrop-blur-sm {
+ --tw-backdrop-blur: blur(var(--blur-sm));
+ -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,);
+ 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,);
+ }
+ .transition-all {
+ transition-property: all;
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
+ }
+ .transition-colors {
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
+ }
+ .transition-shadow {
+ transition-property: box-shadow;
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
+ }
+ .duration-300 {
+ --tw-duration: 300ms;
+ transition-duration: 300ms;
+ }
+ .duration-1000 {
+ --tw-duration: 1000ms;
+ transition-duration: 1000ms;
+ }
+ .ease-out {
+ --tw-ease: var(--ease-out);
+ transition-timing-function: var(--ease-out);
+ }
+ .hover\:bg-blue-700 {
+ &:hover {
+ @media (hover: hover) {
+ background-color: var(--color-blue-700);
+ }
+ }
+ }
+ .hover\:bg-gray-800 {
+ &:hover {
+ @media (hover: hover) {
+ background-color: var(--color-gray-800);
+ }
+ }
+ }
+ .hover\:text-blue-500 {
+ &:hover {
+ @media (hover: hover) {
+ color: var(--color-blue-500);
+ }
+ }
+ }
+ .hover\:text-gray-800 {
+ &:hover {
+ @media (hover: hover) {
+ color: var(--color-gray-800);
+ }
+ }
+ }
+ .hover\:text-white {
+ &:hover {
+ @media (hover: hover) {
+ color: var(--color-white);
+ }
+ }
+ }
+ .hover\:shadow-lg {
+ &:hover {
+ @media (hover: hover) {
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ }
+ }
+ }
+ .focus\:ring-2 {
+ &:focus {
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ }
+ }
+ .focus\:ring-blue-500 {
+ &:focus {
+ --tw-ring-color: var(--color-blue-500);
+ }
+ }
+ .focus\:outline-none {
+ &:focus {
+ --tw-outline-style: none;
+ outline-style: none;
+ }
+ }
+ .active\:scale-95 {
+ &:active {
+ --tw-scale-x: 95%;
+ --tw-scale-y: 95%;
+ --tw-scale-z: 95%;
+ scale: var(--tw-scale-x) var(--tw-scale-y);
+ }
+ }
+ .active\:transform {
+ &:active {
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+ }
+ }
+ .sm\:m-2 {
+ @media (width >= 40rem) {
+ margin: calc(var(--spacing) * 2);
+ }
+ }
+ .sm\:w-5\/12 {
+ @media (width >= 40rem) {
+ width: calc(5/12 * 100%);
+ }
+ }
+ .sm\:p-2 {
+ @media (width >= 40rem) {
+ padding: calc(var(--spacing) * 2);
+ }
+ }
+ .sm\:text-2xl {
+ @media (width >= 40rem) {
+ font-size: var(--text-2xl);
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
+ }
+ }
+ .sm\:text-base {
+ @media (width >= 40rem) {
+ font-size: var(--text-base);
+ line-height: var(--tw-leading, var(--text-base--line-height));
+ }
+ }
+ .md\:left-5 {
+ @media (width >= 48rem) {
+ left: calc(var(--spacing) * 5);
+ }
+ }
+ .md\:left-8 {
+ @media (width >= 48rem) {
+ left: calc(var(--spacing) * 8);
+ }
+ }
+ .md\:mt-0 {
+ @media (width >= 48rem) {
+ margin-top: calc(var(--spacing) * 0);
+ }
+ }
+ .md\:h-96 {
+ @media (width >= 48rem) {
+ height: calc(var(--spacing) * 96);
+ }
+ }
+ .md\:w-3\/4 {
+ @media (width >= 48rem) {
+ width: calc(3/4 * 100%);
+ }
+ }
+ .md\:grid-cols-2 {
+ @media (width >= 48rem) {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ }
+ .md\:grid-cols-3 {
+ @media (width >= 48rem) {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+ }
+ .md\:grid-cols-4 {
+ @media (width >= 48rem) {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+ }
+ .md\:flex-row {
+ @media (width >= 48rem) {
+ flex-direction: row;
+ }
+ }
+ .md\:items-center {
+ @media (width >= 48rem) {
+ align-items: center;
+ }
+ }
+ .md\:justify-between {
+ @media (width >= 48rem) {
+ justify-content: space-between;
+ }
+ }
+ .md\:pl-20 {
+ @media (width >= 48rem) {
+ padding-left: calc(var(--spacing) * 20);
+ }
+ }
+ .md\:text-center {
+ @media (width >= 48rem) {
+ text-align: center;
+ }
+ }
.md\:text-4xl {
- font-size: 2.25rem;
- line-height: 2.5rem;
+ @media (width >= 48rem) {
+ font-size: var(--text-4xl);
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
+ }
+ }
+ .md\:text-6xl {
+ @media (width >= 48rem) {
+ font-size: var(--text-6xl);
+ line-height: var(--tw-leading, var(--text-6xl--line-height));
+ }
+ }
+ .lg\:h-screen {
+ @media (width >= 64rem) {
+ height: 100vh;
+ }
+ }
+ .lg\:grid-cols-2 {
+ @media (width >= 64rem) {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ }
+ .lg\:grid-cols-3 {
+ @media (width >= 64rem) {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+ }
+ .lg\:grid-cols-4 {
+ @media (width >= 64rem) {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+ }
+ .dark\:border-gray-600 {
+ @media (prefers-color-scheme: dark) {
+ border-color: var(--color-gray-600);
+ }
+ }
+ .dark\:border-gray-700 {
+ @media (prefers-color-scheme: dark) {
+ border-color: var(--color-gray-700);
+ }
+ }
+ .dark\:bg-blue-900 {
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--color-blue-900);
+ }
+ }
+ .dark\:bg-blue-900\/20 {
+ @media (prefers-color-scheme: dark) {
+ background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
+ @supports (color: color-mix(in lab, red, red)) {
+ background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
+ }
+ }
+ }
+ .dark\:bg-gray-600 {
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--color-gray-600);
+ }
+ }
+ .dark\:bg-gray-700 {
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--color-gray-700);
+ }
+ }
+ .dark\:bg-gray-800 {
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--color-gray-800);
+ }
+ }
+ .dark\:bg-gray-900 {
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--color-gray-900);
+ }
+ }
+ .dark\:bg-gray-900\/20 {
+ @media (prefers-color-scheme: dark) {
+ background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 20%, transparent);
+ @supports (color: color-mix(in lab, red, red)) {
+ background-color: color-mix(in oklab, var(--color-gray-900) 20%, transparent);
+ }
+ }
+ }
+ .dark\:bg-green-900 {
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--color-green-900);
+ }
+ }
+ .dark\:bg-green-900\/20 {
+ @media (prefers-color-scheme: dark) {
+ background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
+ @supports (color: color-mix(in lab, red, red)) {
+ background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
+ }
+ }
+ }
+ .dark\:bg-purple-900\/20 {
+ @media (prefers-color-scheme: dark) {
+ background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);
+ @supports (color: color-mix(in lab, red, red)) {
+ background-color: color-mix(in oklab, var(--color-purple-900) 20%, transparent);
+ }
+ }
+ }
+ .dark\:bg-red-900 {
+ @media (prefers-color-scheme: dark) {
+ background-color: var(--color-red-900);
+ }
+ }
+ .dark\:text-blue-200 {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-blue-200);
+ }
+ }
+ .dark\:text-gray-200 {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-gray-200);
+ }
+ }
+ .dark\:text-gray-300 {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-gray-300);
+ }
+ }
+ .dark\:text-gray-400 {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-gray-400);
+ }
+ }
+ .dark\:text-green-200 {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-green-200);
+ }
+ }
+ .dark\:text-red-200 {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-red-200);
+ }
+ }
+ .dark\:text-white {
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-white);
+ }
+ }
+ .dark\:shadow-gray-200 {
+ @media (prefers-color-scheme: dark) {
+ --tw-shadow-color: oklch(92.8% 0.006 264.531);
+ @supports (color: color-mix(in lab, red, red)) {
+ --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent);
+ }
+ }
+ }
+ .dark\:hover\:bg-gray-200 {
+ @media (prefers-color-scheme: dark) {
+ &:hover {
+ @media (hover: hover) {
+ background-color: var(--color-gray-200);
+ }
+ }
+ }
+ }
+ .dark\:hover\:text-blue-400 {
+ @media (prefers-color-scheme: dark) {
+ &:hover {
+ @media (hover: hover) {
+ color: var(--color-blue-400);
+ }
+ }
+ }
+ }
+ .dark\:hover\:text-gray-200 {
+ @media (prefers-color-scheme: dark) {
+ &:hover {
+ @media (hover: hover) {
+ color: var(--color-gray-200);
+ }
+ }
+ }
+ }
+ .dark\:hover\:text-gray-800 {
+ @media (prefers-color-scheme: dark) {
+ &:hover {
+ @media (hover: hover) {
+ color: var(--color-gray-800);
+ }
+ }
+ }
}
}
-
-@media (min-width: 1024px) {
- .lg\:h-screen {
- height: 100vh;
+@property --tw-translate-x {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0;
+}
+@property --tw-translate-y {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0;
+}
+@property --tw-translate-z {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0;
+}
+@property --tw-space-y-reverse {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0;
+}
+@property --tw-space-x-reverse {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0;
+}
+@property --tw-border-style {
+ syntax: "*";
+ inherits: false;
+ initial-value: solid;
+}
+@property --tw-gradient-position {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-gradient-from {
+ syntax: "
";
+ inherits: false;
+ initial-value: #0000;
+}
+@property --tw-gradient-via {
+ syntax: "";
+ inherits: false;
+ initial-value: #0000;
+}
+@property --tw-gradient-to {
+ syntax: "";
+ inherits: false;
+ initial-value: #0000;
+}
+@property --tw-gradient-stops {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-gradient-via-stops {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-gradient-from-position {
+ syntax: "";
+ inherits: false;
+ initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+ syntax: "";
+ inherits: false;
+ initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+ syntax: "";
+ inherits: false;
+ initial-value: 100%;
+}
+@property --tw-leading {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-font-weight {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-shadow {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-shadow-alpha {
+ syntax: "";
+ inherits: false;
+ initial-value: 100%;
+}
+@property --tw-inset-shadow {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+ syntax: "";
+ inherits: false;
+ initial-value: 100%;
+}
+@property --tw-ring-color {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-ring-shadow {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-inset-ring-shadow {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-ring-offset-width {
+ syntax: "";
+ inherits: false;
+ initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+ syntax: "*";
+ inherits: false;
+ initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+ syntax: "*";
+ inherits: false;
+ initial-value: 0 0 #0000;
+}
+@property --tw-backdrop-blur {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-brightness {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-contrast {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-grayscale {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-invert {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-opacity {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-saturate {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-sepia {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-duration {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-ease {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-scale-x {
+ syntax: "*";
+ inherits: false;
+ initial-value: 1;
+}
+@property --tw-scale-y {
+ syntax: "*";
+ inherits: false;
+ initial-value: 1;
+}
+@property --tw-scale-z {
+ syntax: "*";
+ inherits: false;
+ initial-value: 1;
+}
+@property --tw-rotate-x {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-rotate-y {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-rotate-z {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-skew-x {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-skew-y {
+ syntax: "*";
+ inherits: false;
+}
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
}
-}
\ No newline at end of file
+}
+@keyframes pulse {
+ 50% {
+ opacity: 0.5;
+ }
+}
+@keyframes bounce {
+ 0%, 100% {
+ transform: translateY(-25%);
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ }
+ 50% {
+ transform: none;
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+}
+@layer properties {
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+ *, ::before, ::after, ::backdrop {
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-translate-z: 0;
+ --tw-space-y-reverse: 0;
+ --tw-space-x-reverse: 0;
+ --tw-border-style: solid;
+ --tw-gradient-position: initial;
+ --tw-gradient-from: #0000;
+ --tw-gradient-via: #0000;
+ --tw-gradient-to: #0000;
+ --tw-gradient-stops: initial;
+ --tw-gradient-via-stops: initial;
+ --tw-gradient-from-position: 0%;
+ --tw-gradient-via-position: 50%;
+ --tw-gradient-to-position: 100%;
+ --tw-leading: initial;
+ --tw-font-weight: initial;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-color: initial;
+ --tw-shadow-alpha: 100%;
+ --tw-inset-shadow: 0 0 #0000;
+ --tw-inset-shadow-color: initial;
+ --tw-inset-shadow-alpha: 100%;
+ --tw-ring-color: initial;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-inset-ring-color: initial;
+ --tw-inset-ring-shadow: 0 0 #0000;
+ --tw-ring-inset: initial;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-backdrop-blur: initial;
+ --tw-backdrop-brightness: initial;
+ --tw-backdrop-contrast: initial;
+ --tw-backdrop-grayscale: initial;
+ --tw-backdrop-hue-rotate: initial;
+ --tw-backdrop-invert: initial;
+ --tw-backdrop-opacity: initial;
+ --tw-backdrop-saturate: initial;
+ --tw-backdrop-sepia: initial;
+ --tw-duration: initial;
+ --tw-ease: initial;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-scale-z: 1;
+ --tw-rotate-x: initial;
+ --tw-rotate-y: initial;
+ --tw-rotate-z: initial;
+ --tw-skew-x: initial;
+ --tw-skew-y: initial;
+ }
+ }
+}
diff --git a/vite.config.mts b/vite.config.mts
index ec1a753..6346f9f 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -2,11 +2,13 @@ import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';
+import tailwindcss from '@tailwindcss/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
+ tailwindcss(),
viteTsconfigPaths(),
svgr({
include: '**/*.svg?react',