JSFiddle - React, Tailwind, and code Playground

centered box with FlexBox CSS only

by Andrew Pougher

HTML

<h1>Graphic Designer</h1>

CSS

@import url('http://fonts.googleapis.com/css?family=Montserrat|Raleway');

html {
  font: 1em Raleway,sans-serif;
    color: white;
    background: #f03d36;
    background: -webkit-linear-gradient(transparent,rgba(0,0,0,.15) 700px) no-repeat #f03d36;
    background: linear-gradient(transparent,rgba(0,0,0,.15) 700px) no-repeat #f03d36;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font: 1em/1.4 Montserrat, sans-serif;
  letter-spacing: -.1em;
  background: url(https://unsplash.imgix.net/photo-1429042007245-890c9e2603af?fit=crop&fm=jpg&h=500&q=75&w=800) center / cover no-repeat;
}

h1 {
  display: flex;
  align-items: center;
  max-width: 300px;
  height: 300px;
  background: rgba(0,0,0,.6);
  color: #fff;
  text-align: center;
  font-weight: normal;
  font-size: 3em;
  -webkit-backdrop-filter: grayscale(1) contrast(3) blur(14px);
  backdrop-filter: grayscale(1) contrast(3) blur(14px);
}

JavaScript

/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');