JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div id="dailyContainer" class="notification">
      <div class="daily__body container">
        <div id="dailyTitle" class="daily__title"></div>
        <div class="daily__reward">
          <img src="/static/img/money.png" alt="money image">
          <p>Daily rewards</p>
        </div>
        <p class="daily__coin">
          <picture>
            <source srcset="static/img/coin.webp" type="image/webp"><img src="img/coin.png" alt=""></picture>
          <span id="dailySum"></span>
        </p>
        <div id="dailyButton" class="daily__button"><button class="button">Continue</button></div>
      </div>
    </div>

    <script>
      // Пример показа уведомления
      setTimeout(() => {
        document.querySelector('#dailyContainer').classList.add('show');
      }, 2000); // Показать уведомление через 2 секунды

    </script>

CSS

.daily__body {
    position: relative;
    z-index: 1;
}

.notification {
    position: fixed;
    bottom: -66.67%; /* Начальное положение снизу */
    left: 0;
    width: 100%;
    height: 66.67%; /* 2/3 экрана */
    background: rgba(0, 0, 0, 0.5); /* Размытый фон */
    backdrop-filter: blur(10px); /* Размытие фона */
    border-radius: 20px 20px 0 0; /* Скругленные верхние углы */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Поверх других элементов */
    transition: bottom 0.5s ease-in-out; /* Плавное появление */
}

.notification.show {
    bottom: 0; /* Конечное положение */
}

.notification__content {
    background: rgba(255, 255, 255, 0.9); /* Фон контента */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}