JSFiddle - React, Tailwind, and code Playground

by pxfunc

HTML

<div id="content">
    <button id="bg-color">BG w/Color</button> | <button id="bg-trans">BG transparent</button> | <button id="zoom">Zoom:1</button>
    
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />
    
    <div id="countdown"></div>
    
    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

CSS

body {text-align:center;font-family:arial;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}

.test-bg-color {background-color:red;}
.test-bg-transparent {background-color:transparent;}
.zoom {zoom:1;}

JavaScript

var $links = $('#link1, #link2'),
    on = ' (on)';

$('#bg-color').click(function() {
    var $that = $(this);
    $that.text($that.text().indexOf(on) > -1 ? $that.text().replace(on, '') : $that.text() + on);
    $links.toggleClass('test-bg-color');
});

$('#bg-trans').click(function() {
    var $that = $(this);
    $that.text($that.text().indexOf(on) > -1 ? $that.text().replace(on, '') : $that.text() + on);
    $links.toggleClass('test-bg-transparent');
});

$('#zoom').click(function() {
    var $that = $(this);
    $that.text($that.text().indexOf(on) > -1 ? $that.text().replace(on, '') : $that.text() + on);
    $links.toggleClass('zoom');
});