HTML Tabs with Close Button

1,446 byby.createsite

.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