JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="q">Question: 1</div>

<div class="container">

<div class="line"></div>

<div class="a1">
<div class="a2"></div>
<h1>I am vertically and horizontal aligned?</h1>
</div>

<div class="line"></div>

</div>

CSS

body {background: rgb(63,94,251);
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);}

.line {height:1px;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 2%, rgba(255,255,255,1) 98%, rgba(255,255,255,0) 100%);}

.container {max-width:500px;margin:auto;color:#ffffff;}
.q {width:100%;text-align:center;color:#ffffff;line-height:30px;}

.a1 {position: relative;}

.a2 {position: relative;padding:20px;height:60px;
backdrop-filter: blur(14px) saturate(126%);
-webkit-backdrop-filter: blur(14px) saturate(126%);
background-color: rgba(17, 25, 40, 0.34);
    
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
z-index:0;
}



.a1 h1 {width:90%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size:18px;
line-height:20px;
text-align:center;
z-index:20;
}