JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="slide-in-banner-black-friday slide-in-banner slide-in-banner-visible">
    <img class="slide-in-banner-header entered lazyloaded" alt="Black Friday Sale" src="https://elfsight.com/wp-content/themes/elfsight/frontend/assets/img/black-firday-slide-in-header-2024.png" data-lazy-srcset="https://elfsight.com/wp-content/themes/elfsight/frontend/assets/img/[email protected] 2x" data-lazy-src="https://elfsight.com/wp-content/themes/elfsight/frontend/assets/img/black-firday-slide-in-header-2024.png" data-ll-status="loaded" srcset="https://elfsight.com/wp-content/themes/elfsight/frontend/assets/img/[email protected] 2x"><noscript><img class="slide-in-banner-header" alt="Black Friday Sale" src="https://elfsight.com/wp-content/themes/elfsight/frontend/assets/img/black-firday-slide-in-header-2024.png" srcset="https://elfsight.com/wp-content/themes/elfsight/frontend/assets/img/[email protected] 2x"></noscript>
    <div class="slide-in-banner-title">50% OFF</div>
    <div class="slide-in-banner-text">The Biggest Sale of the Year. Don't Miss Out!</div>
    <a href="https://dash.elfsight.com/" class="slide-in-banner-button button-magenta button-40 button" target="_blank" rel="nofollow noreferrer noopener">Grab The Deal</a>

    <div class="slide-in-banner-close">
        <svg class="slide-in-banner-close-icon">
            <use xlink:href="#icon-close-bold-16"></use>
        </svg>
    </div>
</div>

CSS

.slide-in-banner-black-friday {
    background: #111 url(https://elfsight.com/wp-content/themes/elfsight/frontend/assets/img/black-friday-slide-in-bg-2.jpg) no-repeat;
    background-size: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.slide-in-banner-visible {
    transform: translateX(0);
    opacity: 1;
}
.slide-in-banner {
    position: fixed;
    left: 20px;
    bottom: 20px;
    padding: 24px;
    width: 260px;
    z-index: 999;
    border-radius: 12px;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.3s ease;
    transform: translateX(-280px);
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.3);
    opacity: 0;
    color: #fff;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
body {
    color: #111;
    font: 400 18px / 1.555 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body {
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1)...