.tab-item:first-child { position: relative; } .tab-item { position: relative; cursor: pointer; --tw-bg-opacity: .2; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-backdrop-blur: blur(15px); 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); flex: 1 1 0%; border-radius: 16px; } .tab-item .content-wrapper { position: relative; height: 220px; background-repeat: no-repeat; background-size: 100% 100%; overflow: hidden; border-radius: 16px; padding: 2rem; background-position: left center, right center; } .tab-item .tab-title { font-size: 36px; font-weight: 600; line-height: 64px; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .tab-item .tab-description { font-size: 16px; font-weight: 300; line-height: 22px; color: rgba(255, 255, 255, 0.8); } .tab-item .tab-btn { display: flex; height: 40px; min-width: 168px; flex-direction: row; align-items: center; justify-content: center; --tw-bg-opacity: -0.5; background-color: rgb(89 0 255 / var(--tw-bg-opacity)); padding-left: 16px; padding-right: 16px; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); --tw-backdrop-blur: blur(10px); 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); gap: 6px; overflow: hidden; border-radius: 10px; } .tab-item .tab-btn .icon { /* --tw-text-opacity: 1; color: rgb(29 33 41 / var(--tw-text-opacity)); */ transform: translate(-100px); transition-property: transform; transition-duration: 0.3s; } .tab-item .tab-btn .btn-text { transform: translate(-14px); transition-property: transform; transition-duration: 0.3s; font-weight: 600; } .tab-item:hover .hover-btn { --tw-bg-opacity: 0.5; } .tab-item:hover .hover-btn .btn-text, .tab-item:hover .hover-btn .icon { transform: translate(0px); }