Tab overloaded

Open In Editor Publish Your Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
} 
.selector       { color: #F92672; } 
.property       { color: #66D9EF; } 
.value-number   { color: #AE81FF; } 
.value-string   { color: #E6DB74; } 
.value-color    { color: #A6E22E; } 
.brace          { color: #F8F8F2; } 
.comment        { color: #75715E; }
.function       { color: #A6E22E; }
.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

.tab {
  position: absolute;
  width: 80px;
  height: 40px;
  background-color: #333;
  border-radius: 8px;
  transform-origin: center;
  animation: tabPulse 1s infinite alternate;
  
}
@keyframes tabPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tab:nth-child(1) {
  left: 10%;
  top: 10%;
  animation-delay: 0s;
}
.tab:nth-child(2) {
  left: 30%;
  top: 10%;
  animation-delay: 0.2s;
}
.tab:nth-child(3) {
  left: 50%;
  top: 10%;
  animation-delay: 0.4s;
}
.tab:nth-child(4) {
  left: 70%;
  top: 10%;
  animation-delay: 0.6s;
}

Tab overloaded

Recommended

JavaScript Tab Menu

HTML Drawing Tablet Code with Javascript

HTML Tabs with Close Button

HTML

CSS

JS

Recommended

JavaScript Tab Menu

HTML Drawing Tablet Code with Javascript

HTML Tabs with Close Button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS