JSFiddle - React, Tailwind, and code Playground

by annndrewww

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Modal Window</title>
</head>
<body>
    <h1>Modal window</h1>
    <button id="btn">Open Kid Window</button>


    <div id="container" class="window-container">
        <div id="window" class="window">
            <div id="close" class="window-close">&#10006;</div>
            <h2>Modal window is open</h2>
        </div>
    </div>
<script src="script.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

body {
    background-color: #414141;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin: 0;
    min-height: 100vh;

}

h1 {
    font-size: 40px;
    text-align: center;
}

button {
    padding: 1rem;
    outline: none;
    border: none;
    border-radius: 5px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: #414141;
    background-color: #fff;
    cursor: pointer;
}

button:hover, button:active {
    opacity: 0.85;
}

/* Modal window style */
.window-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
    transition: .3s all ease-in;

}

.window {
    width: 500px;
    background-color: #fff;
    color: #414141;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 2px 4px 4px rgba(255,255,255, 0.6);
    position: relative;
}

.window-close {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

h2 {
    font-size: 36px;

}

p {
    line-height: 27px;
    font-size: 25px;
}

.window-container.active {
    transform: translateY(0);

}

JavaScript

const btn = document.getElementById('btn');
const closeWindow = document.getElementById('close')
const container = document.getElementById('container');
const text = `Hello. I'm modal window,<br> don't worry, you'll be fine!!!`;
const mainContainer = document.getElementById('window');


// Open Window
btn.addEventListener('click', () => {
    container.classList.add('active');
})

// Close window
function close() {
    // Mouse Click
    closeWindow.addEventListener('click', () => {
        container.classList.remove('active');
    })
}

close()
// Auto write text function
function autoWrite() {
    // Script
    mainContainer.innerText = text.slice(0, index);
    index++;

    if(index > text.length - 1) {
        index = 0;
    }

    // Text Style
    mainContainer.style.color = '#414141';

}

setInterval(autoWrite, 100)