JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!--<div class="profile-container border-ruby metallic-shine">-->

<div class="profile-container border-cobalt metallic-shine">

CSS

.profile-container {
  width: 100px;
  height: 100px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
	border: 12px solid transparent;
  border-radius: 10px;
}

/* Optional shine effect */
.metallic-shine {
position: relative;
overflow: hidden;
}

.border-ruby {
  background: linear-gradient(45deg, #000, #000) padding-box,
              linear-gradient(45deg, 
                #e63946,
                #f1faee,
                #a8dadc,
                #f1faee,
                #e63946) border-box;
}

/* Emerald metallic border */
.border-emerald {
  background: linear-gradient(45deg, #000, #000) padding-box,
              linear-gradient(45deg, 
                #50b848,
                #d9f0b4,
                #7cbf7c,
                #e9f1d5,
                #50b848) border-box;
}

/* Sapphire metallic border */
.border-sapphire {
  background: linear-gradient(45deg, #000, #000) padding-box,
              linear-gradient(45deg, 
                #3a86ff,
                #83c5ff,
                #d9d9d9,
                #3a86ff,
                #3a86ff) border-box;
}

/* Amethyst metallic border */
.border-amethyst {
  background: linear-gradient(45deg, #000, #000) padding-box,
              linear-gradient(45deg,
                #9b59b6,
                #d2a6dc,
                #c39bd3,
                #9b59b6,
                #9b59b6) border-box;
}

/* Titanium metallic border */
.border-titanium {
  background: linear-gradient(45deg, #000, #000) padding-box,
              linear-gradient(45deg,
                #b7b2b2,
                #949494,
                #6f6f6f,
                #b7b2b2) border-box;
}

/* Nickel metallic border */
.border-nickel {
  background: linear-gradient(45deg, #000, #000) padding-box,
              linear-gradient(45deg,
                #c4c4c4,
                #b0b0b0,
                #989898,
                #c4c4c4) border-box;
}

/* Lead metallic border */
.border-lead {
  background:...