JSFiddle - React, Tailwind, and code Playground

by Tankefiddle

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
    <img src="https://aepschmitt.dk/jul/kugle_guld.png" id="guld" class="kugle">
    <img src="https://aepschmitt.dk/jul/kugle_blå.png" id="blå" class="kugle">
    <!--  TILFØJ JERES KODE UNDER MIG  -->
    

    <!--  TILFØJ JERES KODE OVER MIG  -->
    <script src="/js/script.js"></script>
</body>
</html>

CSS

body {
    margin:0;
    height:100vh;
    background-image: url('https://aepschmitt.dk/jul/tree01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    overflow:hidden;
}

.kugle {
    height: 50px;
    width:50px;
}

#guld {
    position: absolute;
    left:45%;
    top:40%;
}

#blå {
    position: absolute;
}

JavaScript

// MUS SCRIPT
$('#blå').click(function(){
  alert('MUS!')
})

// FORSVINDINGSSCRIPT
$('.kugle').click(function(){
  $(this).animate({top : '90%'})
})