JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<div class="card">
  <div class="animatedBorder">
    <div class="content">
     BLA BLA YADA YADA  
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

@keyframes rotate_border {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	} 100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@webkit-keyframes rotate_border {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	} 100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.animatedBorder::after {
	content: " ";
	position: absolute;
	z-index: 1;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	border-radius: 8px;
	background: #cf0b26;
	background: -moz-linear-gradient(top, #006fde 5%, #fdbf14 50%, #006fde 95%);
	background: -webkit-linear-gradient(top, #006fde 5%,#fdbf14 50%,#006fde 95%);
	background: linear-gradient(to bottom, #006fde 5%,#fdbf14 50%,#006fde 95%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006fde', endColorstr='#006fde',GradientType=0 );
	-webkit-animation: rotate_border 2s linear infinite;
	animation: rotate_border 2s linear infinite;
}

.card {
  width: 200px;
  height: 200px;
  position: relative;  
  z-index: 3;
  border: 1px solid transparent;
  border-radius: 10px; 
  background: black;
  overflow: hidden;
  padding: 5px;
}

.animatedBorder {
   padding: 5px;
}
.content {
  padding: 5px;
  border-radius: 5px;
    position: relative;
     background: #333;
     color: white;
   height: 180px;
   width: 100%;
  z-index: 2;
}