JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="box">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, quisquam!
  </p>
  
</div>

<div class="box">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt delectus recusandae odio numquam ullam inventore architecto tempore aperiam sunt quibusdam eum, quod rerum veritatis autem?
  </p>
</div>

<div class="box">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa consequatur quaerat error distinctio, corrupti accusamus eaque qui incidunt sint deleniti sequi aspernatur non inventore vero reprehenderit delectus? Totam suscipit laudantium aspernatur sunt architecto ipsa sed dolorem fugit labore quidem, reiciendis eveniet facere provident alias esse laborum voluptatum nulla consectetur quibusdam?
  </p>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}
body {
  background: #FF6600;
}
.box {
  width: 60%;
  min-width: 300px;
  margin: 30px;
  font-size: 18px;
  font-family: sans-serif;
  line-height: 1.4;
  padding: 10px 10px;
  border-width: 30px 20px 20px 34px;
  border-style: solid;
  border-color: transparent;
  border-image: url("data:image/svg+xml,%3Csvg width='243' height='188' viewBox='0 0 243 188' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.1261 39.2097V39.1744L18.1211 39.1395C18.0695 38.7754 18.0152 38.407 17.9497 38.0386C16.2846 28.6634 9.44958 20.7042 1.15303 18.426C6.73419 14.3811 13.2179 11.6044 19.6242 12.4928L19.9962 12.5444L20.1494 12.2015C23.2597 5.23981 29.6174 0.5 36.9337 0.5H223.692C234.026 0.5 242.5 9.95638 242.5 21.7515V166.248C242.5 178.042 234.024 187.5 223.692 187.5H36.9337C26.6001 187.5 18.1261 178.042 18.1261 166.248V39.2097Z' fill='white' fill-opacity='1' stroke='%23EEEEEE'/%3E%3C/svg%3E%0A") 30 20 20 34 round;
  background-color: rgba(255,255,255,1);
  background-origin: padding-box;
  background-clip: padding-box;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}