JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="banner">
  <div class="banner-background"></div>

</div>

  <div class="glass">
    <div class="glass-content slide-number">02</div>
    <div class="glass-content slide-title">Lorem ipsum dolor sit amet, consectetur.</div>
    <div class="glass-content icon"><svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Chevron Forward</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"/></svg></div>
  </div>

SCSS

* {box-sizing: border-box;}

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

.banner {
  height: 175vh;
  position: relative;

  &-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://wallpaperaccess.com/full/1685148.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

}

.glass {
  position: fixed;
  bottom: 200px;
  right: 200px;
  width: 450px;
  height: 150px;
  overflow: hidden;
  border-radius: 15px;
  
  display: grid;
  grid-template-columns: 90px auto 150px;
  /* From https://css.glass */
  background: rgba(100, 100, 255, 0.25);
  /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(7px);

  &-content {
    display: flex;
    align-items: center;
    font-family: "Raleway", sans-serif;
    color: #fff;
    
    &.slide-number {
      justify-content: center;
      font-size: 32px;
      font-weight: 300;
    }
    
    &.slide-title {
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    &.icon {
      width: 100%;
      height: 100%;
      background: #8a1852;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 60px;
      line-height: 0;
      svg {
        max-width: 64px;
      }
    }
  }
}