JSFiddle - React, Tailwind, and code Playground

HTML

Hi, I have this CSS +HTML code:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>What</title>
        <style type="text/css">
          
        </style>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script>     
       
     </script>
    </head>
    <body dir="rtl">
        <div id="page">
            <div id="littlebox1" class="littlebox1-sentence">put your mouse here</div><div id="littlebox1" class="triangle"> </div>
            <div id="box1">
                           </div>
            </div>
    
       
    </body>
    </html>

CSS

#page {
                width: 900px;
                padding: 0px;
                margin: 0 auto;
                direction: rtl;
                position: relative;
            }
    
            #box1 {
                position: relative;
                width: 500px;
                border: 1px solid black;
                box-shadow: -3px 8px 34px #808080;
                border-radius: 20px;
                box-shadow: -8px 5px 5px #888888;
                right: 300px;
                top: 250px;
                height: 150px;
                -webkit-transition: all 1s;
                font-size: large;
                color: Black;
                padding: 10px;
                background: #D0D0D0;
                opacity: 0;
            }
    
    
            @-webkit-keyframes myFirst {
                0% {
                    right: 300px;
                    top: 150px;
                    background: #D0D0D0;
                    opacity: 0;
                }
    
                100% {
                    background: #909090;
                    ;
                    right: 300px;
                    top: 200px;
                    opacity: 1;
                }
            }
    
            #littlebox1 {
                top: 200px;
                position: absolute;
                display: inline-block;
            }
    
                .littlebox1-sentence {
                    font-size: large;
                    padding-bottom: 15px;
                    padding-top: 15px;
                    padding-left: 25px;
                    padding-right: 10px;
                    background: #D0D0D0;
                    border-radius: 10px;  -webkit-transition: background .25s ease-in-out;
                }
    
                #littlebox1:hover ~ #box1 {
                    -webkit-transition: all 0s;
                    background: #909090;;
                    right: 300px;
                    top: 200px;
                    -webkit-animation:...

JavaScript

$(function() {
      $('.littlebox1-sentence').hover(function() {
        $(this).css('background', '#909090');
        $('.triangle').css('border-right', '50px solid #909090');
      });
    
       </script>
         <script>    $(function() {
      $('.triangle').hover(function() {
        $(this).css('border-right', '50px solid #909090');
        $('.littlebox1-sentence').css('background', '#909090');
      });