JSFiddle - React, Tailwind, and code Playground

by jimmzzz

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <title>Rotating Gradient</title>
    <style>
      body {
        font-family: "Inter", sans-serif;
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #222; /* A contrasting background */
        overflow: hidden;
      }

      .rotating-gradient {
        width: 300px;
        height: 300px;
        background: conic-gradient(#ff7eb3, #ff758c, #ffd194, #ff7eb3);
        border-radius: 50%;
        animation: rotateGradient 3s linear infinite;
      }

      @keyframes rotateGradient {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .gradient-text {
        position: absolute;
        overflow: hiddens;
        font-size: 2rem;
        font-weight: bold;
        background: linear-gradient(
          -90deg,
          #ff7eb3,
          #ff758c,
          #ffd194,
          #ff7eb3
        );
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textGradientShift 2s linear infinite;
       

        @keyframes textGradientShift {
          0% {
            background-position: 0% 50%;
          }
          100% {
            background-position: 100% 50%;
          }
        }
        }

        .gradient-text:after {
          content: "";
          position: absolute;
          width: 300px;
          height: 300px;
          background: conic-gradient(#ff7eb3, #ff758c, #ffd194, #ff7eb3);
          border-radius: 50%;
           left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
       ...