JSFiddle - React, Tailwind, and code Playground

by Nik Shevchenko

HTML

https://jsfiddle.net/#tidy

CSS

@media (max-width: 1600px) {
  .part {
    &-main {
      &__text {
        font-size: 1.2em;
      }
    }

    &__btn {
      margin-top: 0em;
    }
  }
}

@media (max-device-width: 1024px) {
  .part {
    &-content {
      // margin-top: 2em;
    }
    &__btn {
      // margin-top: 1.6em;
    }

    &-main {
      padding-top: 0;
      top: .4em;
    }

    &-block {
      &__img {
        &_one {
          width: 3em;
          height: 3em;
        }

        &_two {
          width: 3.5em;
          height: 3em;
        }

        &_three {
          width: 3em;
          height: 3em;
        }
      }
    }
  }
}

@media (max-device-width: 760px) {
  .part {
    &-main {
      padding-top: 0.1em;
    }
    &-content {
      margin-top: 0em;
    }
    &__btn {
      margin-top: 0em;
    }

    &-block {
      &__img {
        &_one {
          height: 3.5em;
          width: 3.3em;
        }

        &_two {
          height: 3.5em;
          width: 3.8em;
        }

        &_three {
          height: 3.5em;
          width: 3em;
        }
      }
    }
  }
}

@media (max-device-height: 400px) {
  .part {
    .container {
      margin: 0 4.7em;
    }
    &-main {
      padding-top: 0;
    }
    &-block {
      &__img {
        &_one {
          height: 2.5em;
          width: 2.3em;
        }

        &_two {
          height: 2.5em;
          width: 2.8em;
        }

        &_three {
          height: 2.5em;
          width: 2em;
        }
      }
    }
  }
}





@media (max-width: 1600px) {
  .main {
    &__cookie {
      width: 90%;
      left: -.4em !important;
      height: 8em;
    }
    &__present {
      top: 3.5em !important;
    }
  }
}

@media (max-width: 1600px) and (min-height: 800px) {
  .main {
    &-parallax {
      top: 3em;
    }
    &__present {
      top: 5em !important;
    }
  }
}

@media (max-device-width: 1024px) {
  .main {
    &__cookie {
      width: 65%;
      height: 7em;
    }
    &__present {
      top: 2.5em !important;
   ...