JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="shape">content</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum tortor metus, dignissim sodales ex scelerisque iaculis. Curabitur enim velit, sodales dignissim elit vel, sagittis aliquam metus. Integer sodales sem in purus porttitor, porttitor volutpat nisl pharetra. Fusce venenatis hendrerit orci, sed posuere leo placerat vel. Mauris euismod nisi eget massa tincidunt aliquet. Morbi malesuada ex eu leo pellentesque commodo. Nulla facilisi. Ut venenatis risus in nibh congue laoreet. Curabitur in metus mi.

Curabitur at semper lorem, quis aliquet leo. Etiam scelerisque leo nec commodo lobortis. Vivamus tincidunt, magna vel pharetra luctus, est orci lacinia mauris, in vehicula urna purus nec ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent lobortis ipsum vel quam malesuada auctor. Sed rutrum, dui a lacinia viverra, eros sapien pulvinar nulla, eget pulvinar dui erat ac risus. Curabitur vitae augue sed orci mollis tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam justo turpis, vulputate rutrum pretium vitae, placerat viverra leo. Aliquam at arcu at risus fringilla ultrices at vel ligula. Nam gravida condimentum convallis. Nunc bibendum ullamcorper lectus, et feugiat lorem fermentum sed. Duis nec lorem vitae erat placerat consequat.

Nunc rutrum nisl in dui lobortis elementum. In vestibulum vestibulum ullamcorper. Nullam nibh velit, dictum ac ligula vel, dignissim aliquam arcu. Quisque consequat sed est nec pretium. Vivamus pulvinar orci consectetur bibendum eleifend. Maecenas ultricies lacus ac magna dignissim, a tempor ex varius. Integer sed hendrerit dolor. Nunc tristique congue tincidunt. Pellentesque feugiat ligula at enim tempus interdum.

Morbi accumsan ac ante nec egestas. Ut tempor neque erat, ullamcorper rhoncus odio pellentesque nec. Nulla facilisi. Vivamus consequat dui ac feugiat vestibulum. Morbi...

CSS

html,body{
    margin:0;
    padding:0;
    background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}
.shape {
    position:fixed;
    top:0; left:0;
    width:100%;
    background:none;
    height:10%;
    padding-bottom:20%;
    overflow:hidden;
    z-index:1;
}
.shape:after {
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-bottom:1300%;
    top:80%;
    background:none;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px teal;
    z-index:-1;
}
.content{
    padding-top:30%;
}
.