JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="photo_container">

<div class="photo"></div>
<div class="heading">
<span>Mr Blobby</span>
<h1>Praesent pellentesque nulla non ex maximus suscipit</h1>
</div>


</div>

<div class="intro_bg">
<div class="intro">
<p>Nam posuere enim sed leo ullamcorper, ac condimentum ante auctor. Etiam sed leo erat. Maecenas non metus ac risus gravida fermentum. Donec ante velit, congue in nunc non, egestas imperdiet nunc.</p>
</div>
</div>

<div class="article">
<p>Donec vel tortor nec nunc hendrerit convallis in quis risus. Aliquam lorem ex, commodo sed gravida at, blandit at lacus. Nam hendrerit in magna ac aliquam. Proin lobortis nisl sit amet urna aliquam, a laoreet purus ullamcorper.</p><p>Fusce ullamcorper suscipit mauris, et accumsan sapien venenatis id. Donec lectus neque, malesuada ac urna vitae, rutrum accumsan lectus. Morbi tincidunt mattis lacus vestibulum sagittis. Nullam a vehicula justo.</p>
</div>

CSS

body {margin:0;}

.photo_container {position:relative;aspect-ratio: 3 / 1;}

.photo {background-color:pink;aspect-ratio: 3 / 1;}

.heading {margin:0 auto;max-width:800px;border:solid white;border-width:0 0 0 3px;padding:0 15px;position:absolute;bottom:0;left:0;right:0;}
h1 {margin:0;padding:15px 0;}

.intro_bg {background-color:blue;width:100%;padding-bottom:15px;}
.intro {margin:0 auto;max-width:800px;border:solid white;border-width:0 0 0 3px;padding:1px 15px;}

.article {background-color:white;display:block;margin:0 auto;max-width:800px;padding:1px 15px;}