JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<h2>Click it</h2>

<div class="distance">
    <h1>50</h1>
    <h4>kilometers</h4>
</div>
<div class="distance">
    <h1>31</h1>
    <h4>miles</h4>
</div>

CSS

div{
width: 150px;
    cursor: pointer;
}

div:first-of-type{
display: none;
}

h1{font: bold 48pt calibri,sans-serif;
color: #00BBF0;
margin: 5px 0px;
width: 100%;
text-align: center;}

h4{
margin-top: 0;
color: #00BBF0;
font: 12pt calibri;
text-align: center;
}

JavaScript

$('.distance').click(function() {
    $('.distance').toggle();
})