JSFiddle - React, Tailwind, and code Playground

by henser

HTML

<div class="parent">
  <!-- <img src="https://yt3.ggpht.com/a-/AAuE7mCHTSDwu-t0o-tnRu6EXd1y5yqKaK5ti3dzcA=s900-mo-c-c0xffffffff-rj-k-no"/>-->
  <div class="first">
  <div class="hole"></div>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita aLorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia. Veniam inventore...

CSS

* {
  box-sizing: border-box;
}

html, body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.parent {
  position: absolute;
  top: 0;
}

.hole {
  width: 100%;
}


p {
  margin: 0;
}

.first,
.second,
.third {
  position: absolute;
  top: 0;
}

.first .hole::before {
  content: '';
  shape-outside: ellipse(75px 75px at 100% 100%);
  float: right;
  width: 50%;
  height: 150px;
}

.second .hole::before {
  content: '';
  shape-outside: ellipse(75px 75px at 100% 100%);
  float: right;
  width: 50%;
  height: 150px;
}


.third .hole::before {
  content: '';
  shape-outside: ellipse(75px 75px at 100% 100%);
  float: left;
  width: 50%;
  height: 150px;
}

.fourth .hole::before {
  content: '';
  shape-outside: ellipse(75px 75px at 100% 100%);
  float: left;
  width: 50%;
  height: 150px;
}

/* .hole p::after {
  content: '';
  shape-outside: ellipse(75px 75px at 100% 100%);
  float: left;
  width: 150px;
  height: 150px;
} */
/*
.hole::after {
  content: '';
  shape-outside: ellipse(75px 75px at 100% 100%);
  float: left;
  width: 150px;
  height: 150px;
}


img {
  position: absolute;
  width: 100px;
  height: 100px;
} */