JSFiddle - React, Tailwind, and code Playground
HTML
<div class="admin">
<input type="range" min="10" max="35" step="1" value="20" id="slider">
<p>Base unit is: <output id="op">20px</output><p>
</div>
<div class="Component" id="mod">
<h2>Titulo</h2>
<img src="http://placekitten.com/g/250/250" alt="Kitten">
<p><strong>Move o slider aqui em cima!</strong>.<br>O tamanho de cada elemento é controlado pelo font-size que age como uma raiz para os ems e faz com que tudo se redimensione</p>
</div>
CSS
* {
box-sizing: border-box;
}
body {
padding: 120px 0 0 0;
font-family: Arial, sans-serif;
word-break: break-word;
}
.Component {
font-size: 20px;
padding: 1em;
max-width: 30em;
border: solid 2px #4286f4;
margin: 0 auto;
color: #4286f4;
border-radius: 1em 0 1em 1em;
position: relative;
overflow: hidden;
}
.Component:after {
content: '';
display: block;
border-radius: 50% 0 50% 50%;
width: 2em;
height: 2em;
position: absolute;
top: .2em;
right: .2em;
background: #4286f4;
}
.Component h2 {
font-size: 2em;
margin: 0 0 .4em;
}
.Component img {
max-width: 100%;
height: auto;
border: solid .3em #4286f4;
float: left;
margin: 0 1em 1em 0;
}
.Component p {
font-size: 1em;
margin: 1em 0 0 0;
text-align: left;
}
input[type="range"] {
margin: 20px auto;
display: block;
}
.admin {
position: fixed;
background: #eee;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
p {
text-align: center;
}
.p {
font-size: 14px;
padding-top: 100px;
}
@media screen and (max-width: 700px) {
.Component {
font-size: 14px;
}
}
@media screen and (max-width: 400px) {
.Component {
font-size: 10px;
width: auto;
}
}
JavaScript
var slider = document.getElementById('slider'),
mod = document.getElementById('mod'),
op = document.getElementById('op');
slider.onchange = function () {
mod.style.fontSize = this.value + 'px';
op.innerHTML = this.value + 'px';
}
//credits to Louis Lazaris!