JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mine on Vast.ai</title>
    <style>
        @keyframes colorRotate {
            0% { color: magenta; }
            33% { color: cyan; }
            67% { color: yellow; }
            100% { color: magenta; }
        }

        #rotating-text {
            width: 120px;
            min-height: 37px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px; /* Adjusted font size for smaller container */
            border: 1px solid #ccc;
            box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
            cursor: pointer; /* Indicates it's clickable */
            background: #000; /* Background color */
            padding: 5px; /* Added padding for better text display */
        }

        #rotating-text span {
            animation: colorRotate 6s linear infinite;
        }
    </style>
</head>
<body>
    <div id="rotating-text" onclick="window.location.href='https://cloud.vast.ai/?ref_id=87911';">
        <span>Mine XenBlocks</span>
    </div>

    <script>
        const rotatingText = document.getElementById('rotating-text');
        const sentences = [
            '<span style="font-weight: bold; color: cyan">Mine XenBlocks</span>',
            '<span style="font-weight: bold; color: magenta">On Vast.ai</span>'
        ];
        let currentIndex = 0;

        setInterval(() => {
            // Update the text with the next sentence in the array
            rotatingText.innerHTML = sentences[currentIndex];

            // Move to the next sentence in the array
            currentIndex = (currentIndex + 1) % sentences.length;
        }, 2000);
    </script>
</body>
</html>