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="spinner">
<div></div>
</div>
    <div class="home-page">
    <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>
        <a href="#" class="show-page1">Show Page 1</a>
        <a href="#" class="show-page2">Show Page 2</a>
    <ul class="wrapper">
    <li class="icon facebook">
        <span class="tooltip">Facebook</span>
        <span><i class="fab fa-facebook-f"></i></span>
    </li>
    <li class="icon twitter">
        <span class="tooltip">Twitter</span>
        <span><i class="fab fa-twitter"></i></span>
    </li>
    <li class="icon instagram">
        <span class="tooltip">Instagram</span>
        <span><i class="fab fa-instagram"></i></span>
    </li>
</ul>    
        
    </div>

    <div class="page1" style="display: none;">
        <p>This is page 1. It contains specific information about a certain topic</p>
        <input type="range" min="0" max="100" value="50" class="range-bar">
        <a href="#" class="back">Back</a>
    </div>
    <div class="page2" style="display: none;">
        <p>This is page 2. It contains specific information about another topic</p>
        <a href="#" class="back">Back</a>
    </div>
</div>

CSS

.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;
}

.wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition:...

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();
  });
});