JSFiddle - React, Tailwind, and code Playground

by meeky333

HTML

<label id="thenumber">
  £525
</label>
<div id="biggap">

</div>
<div>
    <input type="radio" id="radio1" name="radiobutton" onclick="showMessage()">
    <label for="radio1">Option 1</label><br>

    <input type="radio" id="radio2" name="radiobutton" onclick="showMessage()">
    <label for="radio2">Option 2</label><br>
</div>

<div id="message" class="hidden shake">There may have been changes above, click <a href="#" id="link">here</a> to see</div>

<div id="biggap">

CSS

.hidden {
    display: none;
}

#biggap {
  height: 500px;
}

.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

#radio1 {
  /* Hide the default radio button */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  margin: 0;
}

#radio1:checked {
  /* Style the checked radio button */
  border-color: #007bff; /* Example color */
  background-color: #007bff; /* Example color */
}

#radio1:checked::before {
  /* Display a checkmark when the radio button is checked */
  content: '\2713'; /* Unicode character for checkmark */
  display: inline-block;
  font-size: 12px;
  color: #fff; /* Example color */
  text-align: center;
  line-height: 12px;
  width: 12px;
  height: 12px;
  background-color: #007bff; /* Example color */
  border-radius: 50%;
5

JavaScript

function showMessage() {
    var message = document.getElementById('message');
    message.classList.remove('hidden', 'shake');

    // Adding a delay before re-adding the shake class
    setTimeout(function() {
        message.classList.add('shake');
    }, 10);
}

document.getElementById('link').addEventListener('click', function (event) {
    event.preventDefault();
    window.scrollTo({top: 0, behavior: 'smooth'});
});