JSFiddle - React, Tailwind, and code Playground

by mahalie

HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS Line-Height Example</title>
</head>
<body>
    <div class="menu">Faves
            <span class="count">123</span>
    </div>
    <p class="example"><span class="highlight">Here's another example within a larger block of text. This paragraph has a font-size set to 18 pixels and other than 'normal' each of the measurements to reset line-height should double it. (i.e. 18px, 150% and 1.5).</span></p>
    
    <p id="normal" class="action">line-height: normal</p>
    <p id="pixels" class="action">line-height -> pixel size</p>
    <p id="percent" class="action">line-height -> 100%</p>
    <p id="unitless" class="action">line-height -> 1</p>
</body>

</html>

CSS

body {
    font-size: 100%;
    font-family:Verdana, Arial, sans-serif;
}
div.menu {
  border: 1px solid #ccc;
  color: #5E82B5;
  display: block;
  width:60px;
  clear:right;
  font-weight: bold;
  margin: 4px 0 20px 4px;
  padding: 4px 5px 5px;
  position: relative;
}
.count {
  display:inline;
  width:20px;
  background-color:#aaccff;
  border: 1px solid #78A3DF;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 8px;
  line-height: normal;
  position: absolute;
  top: -4px;
  right:-10px;
    
}
p.example {
  font-size:12px;
  line-height:24px;
  background-color:silver;
}
span.highlight {
  background-color:#ccc;
}
p.action {
    clear:left;
    font-size:0.9em;
    color:#444;
    line-height:1.5;
    text-decoration:underline;
cursor: pointer;
    
}

JavaScript

$('#normal').click(function(){
     $('.count').css('line-height','normal');   
     $('.example').css('line-height','normal'); 
});
$('#pixels').click(function(){
     $('.count').css('line-height','8px');  
    $('.example').css('line-height','18px'); 

});
$('#percent').click(function(){
     $('.count').css('line-height','100%');  
    $('.example').css('line-height','150%'); 
});
$('#unitless').click(function(){
     $('.count').css('line-height','1');  
    $('.example').css('line-height','1.5'); 
});