JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

</br>
<div style="max-width: 500px; margin: auto; margin-bottom: 40px; color: white; text-align: center; font-family: Arial, Helvetica, sans-serif;">click pictures to display testimonial</div>
<div class="outer glow">
  
<script src="https://widget.senja.io/widget/24884ae8-56d8-42ed-8db5-5ab5fd2e930e/platform.js" type="text/javascript" async></script>
<div class="senja-embed" data-id="24884ae8-56d8-42ed-8db5-5ab5fd2e930e" data-mode="shadow" data-lazyload="false" style="display: block;"></div></div>
<div style="max-width: 500px; margin: auto; margin-top: 40px">
    <a style="max-width: 500px; margin: auto; width: 100%; text-align: center; font-size: larger; --accent-color: #ffc107; --box-shadow: 0 0 5px #ffc107, 0 0 25px #ffc107, 0 0 50px #ffc107, 0 0 100px #ffc107; --white-color: #3A0658" class="box__link button-animation" href="Short.aspx" target="_blank">See what all the fuss is about
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </a>
</div>
<div style="max-width: 500px; margin: auto; margin-top: 1px; color: white; text-align: center; font-family: Arial, Helvetica, sans-serif;">Opens in new tab</div>

CSS

body,html {
  background: #000;
  height:100%;
}


.outer {
  border-radius: 8px;
  margin-top: 60px;
  animation: glow 2s infinite alternate;
  
  max-width: 1000px;
  margin: auto
}


  
 /* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #fff700 transparent;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 30px;
  }

  *::-webkit-scrollbar-track {
    background: #2e2e2e;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #fff700;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
  


@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


:root {
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --body-color: #393937;
    --accent-color: #03e9f4;
    --white-color: #fff;
    --box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Montserrat", sans-serif;
    --normal-font-size: 1rem;
    /*========== Font weight ==========*/
    --font-regular: 600;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --bs-card-bg: #393937 !important
}

/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}



ul {
    list-style: none;
}

a {
    text-decoration:...