JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div class="purring-container">

    <div class="home-page">
    <button class="my-button">Hover me</button>
<div class="tooltip">This is a tooltip</div>
    <button class="play">Play</button>
     <button class="stop">Stop</button>
        <p>This is the home page, it contains a brief introduction about the website and its purpose</p>

   
    </div>

   
</div>

CSS

/* .tooltip {
  display: none;
  position: absolute;
  background-color: #555;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 1;
} */


.home-page {
  position: absolute;
/*   width: 100%; */
  padding:15px;
  z-index: 1;

 transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.purring-container{
  padding:15px;
  color: #000;
 width: 190px;
  height: 254px;
background: #07182E; 
  background-color: #F8FBFE;
  position: relative;
  display: flex; 
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
   box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}
.purring-container::before {
  content: '';
  position: absolute;
  width: 100px;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  height: 130%;

/*   animation: rotBGimg 3s linear infinite;
  transition: all 0.2s linear; */
}
.purring-container.animated::before {
  animation: rotBGimg 2s linear infinite;
  transition: all 0.1s linear;
}
@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.purring-container::after {
  content: '';
  position: absolute;
 /*  background: #07182E; */
/*  background-color: #F8FBFE; */
  
  inset: 5px;
  border-radius: 15px;
}  



.page1, .page2 {
    width: 100%;
    height: 100px;
 z-index: 1;
 transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
     z-index: 1;
}
.wrapper {
  display: inline-flex;
  list-style: none;
/*   height: 120px; */
 /*  width: 100%; */
  padding-top: 20px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
}

.my-button {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  display: flex;
 ...

JavaScript

$(document).ready(function() {
   $('.play').click(function() {
        document.querySelector('.purring-container').classList.add("animated");
    });
    $('.stop').click(function() {
        document.querySelector('.purring-container').classList.remove("animated");
    });
  $('.show-page1').click(function() {
    $('.home-page').hide();
    $('.page1').slideDown();
  });

  $('.show-page2').click(function() {
    $('.home-page').hide();
    $('.page2').slideDown();
  });

  $('.back').click(function() {
    $('.home-page').show('slow');
    $('.page1, .page2').hide();
  });
   $('.my-button').hover(function() {
    $('.tooltip').fadeIn(200);
  }, function() {
    $('.tooltip').fadeOut(200);
  });
});