JSFiddle - React, Tailwind, and code Playground

by luka kupunia

SCSS

@import "/assets/styles/media-mixins.scss";

#dayMob {
    display: block;
}

#dayDesktop {
    display: none;
}

#monthMob {
    display: block;
}

#monthDesktop {
    display: none;
}

#yearMob {
    display: block;
}

#yearDesktop {
    display: none;
}

@include media(XL) {
    #dayMob {
        display: none;
    }

    #dayDesktop {
        display: block;
    }

    #monthMob {
        display: none;
    }

    #monthDesktop {
        display: block;
    }

    #yearMob {
        display: none;
    }

    #yearDesktop {
        display: block;
    }
}

.error {
    margin-top: 2px;
    margin-bottom: 4px;
    text-align: right;
    font-size: 13px;
    color: #f44336;
}

.sign-up {
    flex: 1 0 100%;
    max-width: 100%;
    margin-bottom: 90px;

    @include media(M) {
        margin-bottom: 180px;
    }

    &__banner-title {
        max-width: 210px;

        @include media(M) {
            max-width: 280px;
        }

        @media (min-width: 1300px) {
            max-width: 425px;
        }
    }

    &__banner-text {
        max-width: 320px;
        font-size: 18px;

        @include media(XL) {
            max-width: 480px;
            font-size: 20px;
        }

        & ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }

        & ul li {
            list-style-type: disc;
        }
    }

    &__form {
        width: 100%;
        max-width: 300px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 20px;

        @media (min-width: 1201px) {
            display: grid;
            max-width: 1050px;
            padding-right: 15px;
            padding-left: 15px;
            grid-template-columns: repeat(3, 1fr);
            grid-column-gap: 60px;
        }
    }

    &__field {
        margin-bottom: 8px;
  ...