JSFiddle - React, Tailwind, and code Playground

by sunnsideup

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>awesome</title>
</head>
<h2>
Goal
</h2>
<ul>
   <li></li>
</ul>
<p>
see: <a href="https://stackoverflow.com/questions/11658173/how-does-one-make-a-svg-background-that-stretches-rather-than-tiles">https://stackoverflow.com/questions/11658173/how-does-one-make-a-svg-background-that-stretches-rather-than-tiles</a> on what to do with svg
</p>
<p>
convert here: <a href="https://yoksel.github.io/url-encoder/">https://yoksel.github.io/url-encoder/</a>
</p>
<div class="content-block">
HIGH
Nullet ullamcorper. Duis vel lobortis tellus, a luctus lorem. Sed ac venenatis magna. Morbi gravida non augue a condimentum. Mauris in aliquet lectus. Ut nulla odio, imperdiet nec augue quis, varius convallis sapien.
Nullet ullamcorper. Duis vel lobortis tellus, a luctus lorem. Sed ac venenatis magna. Morbi gravida non augue a condimentum. Mauris in aliquet lectus. Ut nulla odio, imperdiet nec augue quis, varius convallis sapien.
Nullet ullamcorper. Duis vel lobortis tellus, a luctus lorem. Sed ac venenatis magna. Morbi gravida non augue a condimentum. Mauris in aliquet lectus. Ut nulla odio, imperdiet nec augue quis, varius convallis sapien.
Nullet ullamcorper. Duis vel lobortis tellus, a luctus lorem. Sed ac venenatis magna. Morbi gravida non augue a condimentum. Mauris in aliquet lectus. Ut nulla odio, imperdiet nec augue quis, varius convallis sapien.

</div>

<div class="content-block wide">
um purus consequat placerat ornare eget nulla. Fusce eu lorem et augue lobortis cursus quis eget justo. Integer nec mi nulla.
</div>


<body>
  
</body>
</html>

CSS

body {
  background-color: pink;
}
.content-block {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 787 309' fill='none'%3E%3Cg filter='url(%23filter0_d)'%3E%3Cpath d='M26.6347 10.3924C56.1128 10.5747 85.5909 9.11584 115.069 8.93348C128.629 8.93348 142.189 9.11584 155.749 9.2982C181.1 9.84529 203.503 9.11584 229.444 8.20402C314.93 5.10385 398.648 8.93348 484.135 8.93348C511.844 8.93348 543.091 10.7571 570.211 8.75111C579.054 8.20402 586.129 6.19803 594.972 6.01567C608.532 5.8333 623.861 7.29221 636.831 7.8393C663.362 9.11584 688.713 10.21 715.833 10.21C732.34 10.21 755.333 8.20402 771.251 10.3924C768.304 16.7751 770.662 24.4343 770.662 30.817C770.662 41.7588 768.304 149.171 771.251 160.113C774.199 172.513 773.02 280.472 770.662 292.873C735.288 294.149 696.967 293.42 661.003 292.691C634.473 292.143 608.532 290.867 582.592 291.961C560.188 292.873 539.554 293.238 517.15 292.691C482.956 291.779 449.94 291.596 415.746 291.596C372.708 291.596 330.849 293.967 287.811 294.332C226.496 295.061 165.182 292.873 103.278 292.873C82.0535 292.873 59.0606 292.143 37.8363 293.238C30.7616 293.602 13.0747 295.791 6 294.697C13.6643 282.113 9.53737 171.966 9.53737 159.018C9.53737 150.812 13.6643 45.9532 11.8956 37.9292C8.94781 29.5405 8.94781 20.7871 8.94781 11.8513L26.6347 10.3924Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='0' y='0' width='787' height='309' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='4' dy='4'/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.3 0 0 0 0 0.144 0 0 0 0 0 0 0 0 0.3 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow'...