JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="contain">
 
 <fieldset>
    <legend>
      <h1>
      This is some H1 text
      </h1>
    </legend>
        
      <div><img src="https://www.woodhacker.co.uk/images/woodhacker_logo.svg" alt="Description of the SVG image"></div>
 
  </fieldset>
  
</div>

CSS

body {margin:0;}

.contain {height:600px;background-color:#444444;box-sizing: border-box;padding:20px;background-image: linear-gradient(to bottom right, red, yellow);}

fieldset {display:flex;justify-content: center;align-items: center;
height:100%;
box-sizing: border-box;
border: 1px solid white;
color: white;
text-align: center;
transform: rotate(180deg); /* Important */
}

fieldset div {transform: rotate(180deg); /* Important */
max-width:400px;
max-height:400px;}

fieldset div img {width:100%;height:auto;}

legend {padding: 0 10px 0;
transform: rotate(180deg); /* Important */
font-size: 0.8rem;
text-align: center;
margin:auto;
}

legend h1 {
font-size: 0.8rem;
text-align: center;
margin:auto;
}

JavaScript

var u;
function forklift(u) {
if ( u === "forklift certified" ) { u += "untold bitches"; }
else { u = "floppy weiner"; }
}