JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<img id="img" src="https://cdn.pixabay.com/photo/2016/11/01/18/38/background-1789175_960_720.png" alt="abstract background">

        <div class="circle"></div>

        <div class="container" id="glass">
            <div class="image">
            </div>

            <div class="form">
                <div >
                    <label>E-mail</label>
                    <input type="text" value="[email protected]"/>
                </div>

                <div>
                    <label>Password</label>
                    <input type="password" value="[email protected]"/>
                </div>
                <a href="#" class="button_gie">Login</a>
            </div>
        </div>

CSS

body {
 
  color: black;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 3em 14em 14em 10em;
}

img {
  /* set the duration time of the animation */
  animation-duration: 2s;
  
  /* after the animation stops, the box stays in place on the new position */
  animation-fill-mode: forwards;
  
  /* link to the animation */
  animation-name: img;

  height: 100vh;
  left: -500px;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -2;
}

.container {
  /* delay of the animation after loading the page */
  animation-delay: 2s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: glassContainer;

  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1.5em;
  border: solid 1px #999;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(255, 255, 255, 0.3);
  display: inline-block;
  padding: 3em;
  position: relative;
  width: 300px;
  z-index: 1;
}


h2 {
  animation-delay: 2s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: containerContent;

  font-size: 1.7em;
  margin: 0 0 1em 0;
  opacity: 0;
  position: relative;
  top: -20px;
}


a {
  animation-delay: 2s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: containerContent;

  margin: 1em 0;
  opacity: 0;
  position: relative;
  top: -20px;
}

label {
  display: block;
  margin: 5px 0px;
}

div.container div.form {
  animation-delay: 2s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: form;

  margin: 0 auto;
  opacity: 0;
  width: 100%;
}

input {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  border: transparent;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) inset;
  padding: 0.7em;
  width: 100%;
}

.button_gie {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  border: solid #337FED 0;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4), -2px -2px 5px rgba(255, 255, 255, 0.4);
  color: black;
  cursor: pointer;
...