JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.js"></script>
<div class="ui segment fourohfour">
    <div class="content">
        <h2>404</h2>
    <p>The page you are looking for cannot be found</p>
        <span>Go back <a href="">home</a> or <a href="">contact us</a> for help</span>
    
    </div>
   
</div>

SCSS

.ui.segment.fourohfour {
    border: 0;
    background:blue;
    color:white;
    width
    100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    
    &:before {
            background: url('http://www.lorempixel.com/900/900') center center no-repeat;
opacity: 0.5;
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        content: '';
        z-index: 0;
    }
    
    .content {
        position: relative;
        z-index: 1;
        p {
            font-size : 2em ;
            font-weight: lighter;
        }
        h2 {
    font-size: 15.286em;
    margin: 0;
    padding: 0;
}
span {
    margin: 0;
    padding: 0;
}
    }
    
}