HTML Tabs with Close Button

Open In Editor Publish Your Code

.tab {
  position: absolute;
  width: 250px;
  height: 100px;
  background: #292B33; 
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: tabSlide 10s linear infinite; 
}
.tab:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #292B33 transparent transparent transparent;
  border-width: 0 8px 8px 8px;
  animation: tabBlink 2s linear infinite alternate;
}

.tab .content {
  padding: 15px 20px;
  color: #E6DB74;
  display: flex; 
  justify-content: space-between;
  align-items: flex-end; 
}
.tab .close { 
  display: inline-block; 
  background: #75715E; 
  border-radius: 50%; 
  width: 24px; 
  height: 24px; 
  font-size: 16px; 
  text-align: center; 
  line-height: 24px; 
  color: #F8F8F2; 
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;    
}
.tab .close:hover {
  opacity: 1;
}

@keyframes tabSlide {
    0% { transform: translateY(-100px);  }
    50% { transform: translateY(0); }
    100% { transform: translateY(100px); }  
}

@keyframes tabBlink {
  0% { border-width: 0 8px 8px 8px; }
  50% { border-width: 0 16px 16px 16px; }
  100% { border-width: 0 8px 8px 8px; } 
}

HTML Tabs with Close Button

Recommended

CSS Toggle Switch HTML Code

Portfolio Website HTML CSS Template

HTML Login Page Template

HTML

CSS

JS

Recommended

CSS Toggle Switch HTML Code

Portfolio Website HTML CSS Template

HTML Login Page Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS