JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tamponBLfactor_welcomepage" class="tampon" >
					<div class="userWeightInOtherUnit rotateimagecredits">155</div>
					<div class="userWeight">76</div>
					<img class="tamponImg" src="http://boardlineapp.com/app/images/tampon100px.png" />
					<div class="levelText rotateimagecredits">LEVEL</div>
					<div class="userLevel">7</div>
				</div>

CSS

.rotateimagecredits {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);

	/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%; /*0% 20%*/

	/* Should be unset in IE9+ I think. */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.tampon .userWeightInOtherUnit, .tampon #proWeightInOtherUnit {
	position: absolute;
	font-size: 100%;
	top: 34%;
	left: 3%;
	color: #06b4c8;
}
.tampon .userWeight, .tampon #proWeight {
	position: absolute;
	font-size: 350%;
	left: 15%;
	top: -2%;
	color: #06b4c8;
	letter-spacing: -.2em;
}
.tampon .levelText {
	position: absolute;
	top: 90%;
	left: 3%;
	font-size: 100%;
	color: white;
}
.tampon .userLevel, .tampon .proLevel {
	position: absolute;
	font-size: 350%;
	left: 30%;
	top: 40%;
	color: #06b4c8;
	letter-spacing: -.2em;
}

#tamponBLfactor_welcomepage {
	position: relative;
	text-shadow: none;
	width: 20%;
}

#tamponBLfactor_welcomepage img {
	width:100%;
}
#tamponBLfactor_welcomepage .userWeightInOtherUnit {	
	font-size: 60%;
}
#tamponBLfactor_welcomepage .userWeight {
	font-size: 200%;
	left: 15%;
	top: -2%;
	letter-spacing: -.2em;
}
#tamponBLfactor_welcomepage .levelText {
	top: 90%;
	left: .5%;
	font-size: 60%;
}
#tamponBLfactor_welcomepage .userLevel {
	font-size: 200%;
	left: 30%;
	top: 40%;
	letter-spacing: -.2em;
}