JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div class="box">content inside</div>
<!-- Inspired by the mega buttons on https://turbo.build/ -->

CSS

html {
  height: 100%;
  background: #2a2a2a; /* Changed background color */
  display: grid;
  place-items: center;
}

.box {
  width: 60vmin;
  height: 50vmin;
  display: grid;
  place-content: center;
  color: white;
  text-shadow: 0 1px 0 #000;
  --border-angle: 0turn;
  
  /* New gradient colors */
  --main-bg: conic-gradient(
      from var(--border-angle),
      #4a90e2, /* New main gradient color */
      #d1d1d1 5%, /* New color */
      #d1d1d1 60%, /* New color */
      #4a90e2 95% /* New main gradient color */
    );
  
  border: solid 5px transparent;
  border-radius: 2em;
  
  /* New gradient border colors */
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #f39c12, #e74c3c 99%, transparent);
  
  background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  background-position: center center;
  
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
}

@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

.box:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}