JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula ante ligula, at volutpat orci tincidunt in. Fusce non viverra tellus. Mauris pulvinar velit nec justo pretium mollis. Donec bibendum nunc pharetra pulvinar dignissim. Phasellus mattis ex velit, ac pulvinar lorem vestibulum vitae. Pellentesque at nulla at purus molestie cursus eu at libero. Pellentesque vulputate tellus vel venenatis auctor. Maecenas sed lectus dignissim, porta massa eu, interdum ex.
</p>

<figure>
  <div class="red">
  
  </div>
</figure>

<p>
Suspendisse ut tellus quis nisi consequat fermentum a non lectus. Praesent et tristique risus. Proin vel commodo libero. Suspendisse posuere bibendum ultrices. Maecenas et viverra nunc. Nunc semper id lorem eget interdum. Donec ultricies porta lorem. Vivamus fringilla enim dolor, et condimentum libero dictum et. Ut vulputate porttitor odio, eget blandit velit facilisis ac. Nam cursus tincidunt interdum. Cras tristique turpis eu est consectetur viverra. Sed volutpat vitae ipsum eu cursus. Mauris eu egestas orci, a egestas sem.
</p>

<figure class="small">
  <div class="blue">
  
  </div>
</figure>

<p>
Nam nec pharetra risus. Nullam vehicula tincidunt semper. Cras est augue, accumsan ornare vestibulum et, posuere id felis. Proin condimentum diam quis ornare efficitur. Mauris a placerat dui. Aliquam rutrum nisi nec libero mattis, non dignissim risus dapibus. Nunc tempus lorem neque, at fringilla tortor lobortis ac. Mauris eget dolor vitae dui iaculis pellentesque. Duis a volutpat elit, nec ultrices tortor.
</p>

CSS

body {
  margin: 0;
  padding: 2rem;
}

p {
  margin: 2rem 0;
}

figure {
  margin: 4rem 0;
}

figure.small {
  margin-right: 50%;
}

.red {
  background-color: red;
 aspect-ratio: 19/9; 
}

.blue {
  background-color: blue;
 aspect-ratio: 19/9; 
}