JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div class="glass">
    THIS IS A BLUR
</div>

CSS

html {
  background: url('https://source.unsplash.com/random')
}

.glass { 
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 18px );
-webkit-backdrop-filter: blur( 18px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}

JavaScript

const successCallBack= (position) => {   
    console.log(position);
}
const errorCallBack = (error) => {
   console.error(error);
}

navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack);