JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<article>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada lorem nec dolor facilisis rutrum. Nullam commodo placerat leo, at malesuada metus facilisis ut. Praesent posuere lacinia faucibus. Sed suscipit nibh id orci hendrerit ultrices. Nam congue nunc in justo facilisis, nec mattis est tempus. Nullam blandit ipsum nec tempus facilisis. Nulla tempus scelerisque ligula non imperdiet. Cras sollicitudin consequat ante vitae auctor. Maecenas varius, ligula sed vestibulum mattis, ipsum nisl egestas purus, ut placerat arcu sem molestie diam.
  </p>
  <p>
 Proin ex est, finibus mattis lobortis a, fringilla vitae justo. Sed vitae auctor quam, vel porttitor urna. Sed cursus nulla et massa imperdiet gravida. Vivamus vel vehicula risus. Morbi fringilla lorem sit amet tortor faucibus faucibus. Donec sollicitudin, elit vel vehicula feugiat, urna lectus tincidunt dolor, sed interdum nunc orci sed risus. Proin varius rutrum pulvinar. Maecenas ornare massa condimentum felis fringilla tempus. Donec bibendum quis purus ut pellentesque. Nam tempor, neque quis sodales porta, nunc diam aliquet leo, nec scelerisque sapien urna in odio.
  </p>
   <figure>
     <img src="https://images.pexels.com/photos/672358/pexels-photo-672358.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
   </figure> 
   <p>
   Suspendisse at nisl quis erat elementum gravida in id arcu. Morbi massa arcu, tincidunt sed condimentum vitae, volutpat id purus. Donec condimentum diam purus, et accumsan dolor vestibulum id. Integer tempus suscipit ante, et efficitur est porttitor in. Duis pharetra turpis at faucibus varius. Pellentesque fermentum urna ac lectus sollicitudin, non porta lorem laoreet. Quisque turpis sem, mattis lobortis dolor non, pretium scelerisque nisl. Aenean lorem enim, egestas ut pretium non, imperdiet eu mauris. Nulla vulputate imperdiet nisi, sit amet consectetur erat feugiat eu. Aliquam porta lacus mauris, vel ornare felis sodales in. Quisque quis euismod...

CSS

* {
  margin: 0;
  padding: 0;
}

article {
  background: red;
  width: 500px;
  padding: 0 30px;
  margin: auto;
}

p {
  text-align: justify;
  background: orange;
}

img {
  max-width: 100%;
}

figure {
  margin-left: -30px;
  margin-right: -30px;
}