JSFiddle - React, Tailwind, and code Playground

by s_light

HTML

<section class="lightblue">
        some <br>
        other <br>
        content...
    </section>
    <section class="violet stretch content_thing">
        <div class="my_content_element">this is the content..</div>
        <img alt="" src="data:image/svg+xml;charset=utf8,%3Csvg%20version=%221.1%22%20viewBox=%220%200%201%201%22%20preserveAspectRatio=%22xMidYMid%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20fill=%22rgba(255,%20100,%200,%200.5)%22%20/%3E%3C/svg%3E">
        <!-- <div class="content_thing">
            <div class="my_content_element">this is the content..</div>
            <img alt="" src="data:image/svg+xml;charset=utf8,%3Csvg%20version=%221.1%22%20viewBox=%220%200%201%201%22%20preserveAspectRatio=%22xMidYMid%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20fill=%22rgba(255,%20100,%200,%200.5)%22%20/%3E%3C/svg%3E">
        </div> -->
    </section>
    <section class="lime">
        more and more and more<br>
        other <br>
        and more
        content...
    </section>

CSS

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: hsla(0, 100%, 90%, 0.5);
    /* display: flex; */
    /* flex-direction: column; */
    /* flex-wrap: nowrap; */
    /* justify-content: center; */
    /* align-content: center; */
    /* align-items: center; */
}

/* section {
    order: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    align-self: auto;
} */

section {
    height: 15vh;
}


.stretch {
    /* flex-grow: 1 !important; */
    height: 60vh;
}


/* content_thing */
.content_thing {
    background-color: hsla(200, 100%, 50%, 0.5);
    /* padding: 1em; */
    position: relative;
    display:inline-flex;
    /* height:100%; */
}

.content_thing img{
    display:block;
    height:100%;
    width:auto;
}

/* my_content_element */
.my_content_element {
    background-color: hsla(200, 100%, 20%, 0.9);
    margin: 2em;
    padding: 1em;

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* height: 100%; */
	/* width: 100%; */
}


/* color helper */

.lightblue {
    background-color: hsla(200, 100%, 75%, 0.5);
}

.violet {
    background-color: hsla(260, 100%, 50%, 0.5);
}

.lime {
    background-color: hsla(100, 100%, 50%, 0.5);
}