JSFiddle - React, Tailwind, and code Playground

by fasoeu

HTML

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: yellow;
margin-top:0px;
}

p.ex {
    border:1px solid red;
    margin-top: 0%;
    margin-bottom: -20%;
min-height:400px;
}
p.ex.reducted {
margin-top:-60%;
}
p.tab {
background:#f30;
color:#fff;
padding-bottom:20%;
}
</style>
</head>
<body>

<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>
 <p class="tab" onclick="return document.querySelector ('p.ex').classList.toggle ('reducted');">p 3</p>
</body>
</html>