JSFiddle - React, Tailwind, and code Playground

by Павел KLON

HTML

<div class="out">
    <div class="in">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ipsum laboriosam dolorem fugit tenetur quam nobis asperiores minus dignissimos. Sed ab ratione iusto consectetur necessitatibus sequi non dolorem soluta neque?</p>
    </div>
</div>

CSS

.out {
    position: relative;
    max-width: 400px;
    padding: 20px 0;
    background: #fff;
}
    .out:before {
        content: "";
        position: absolute;
        clip: rect(20px, auto, auto, 20px);
        top: 0;
        left: 0;
        margin-left: -40px;
        margin-top: -20px;
        width: 30px;
        height: 30px;
        border: 10px solid #fff;
        border-radius: 50%;
    }

.in {
   margin: 0 -20px;;
   padding: 0 20px;
   background-color: #fff; 
}






html {
    background: url("//placeimg.com/400/400") no-repeat fixed;
    background-size: cover;
}
body {
    padding: 100px;
}
p {
    margin: 0;
    padding: 0;
}