Tabmockup

index.html

<div class="container">
  <div class="modal">
    <div class="header">
      <h2>Logging</h2>
    </div>
    <div >
      <div class="tab active">
       item 1
      </div>
      <div class="tab">item 2</div>
      <div class="tab">item 3</div>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga earum necessitatibus atque vitae quas. Quo magnam iusto totam! Non omnis velit reiciendis quam illo porro temporibus eum, hic vel cum voluptatibus minima quisquam, commodi, harum voluptatem amet inventore. Vero eos ea neque reprehenderit enim tenetur ab suscipit. Fugit aliquam, culpa minus ad ea possimus voluptatem et optio veniam. Fugit fuga laboriosam laudantium dicta accusantium reiciendis veritatis similique harum saepe aut quia nisi dolorem ea ducimus, tenetur maxime, deserunt eaque, quos quae velit ut aperiam corrupti totam eum aliquam. Excepturi quam, voluptate aspernatur asperiores reprehenderit omnis. Ex rem, natus excepturi porro ipsum ut possimus nobis enim voluptatibus delectus saepe, fuga laudantium repudiandae ipsam voluptas eveniet corporis facere labore reprehenderit, magni. Voluptates necessitatibus, maxime, minima nobis optio mollitia enim rerum. Culpa optio, at illum recusandae ipsam provident, doloribus sapiente, minima obcaecati iure quasi odit sequi inventore voluptatem dignissimos libero, ad pariatur velit. Vitae possimus quidem, voluptatibus perspiciatis tempora culpa id fuga doloribus tempore, aut neque, velit atque nihil suscipit labore. Vel, ea perferendis aliquid molestiae numquam quasi a, omnis fuga non cupiditate harum enim eum dolorum. Nostrum ex repellat, consequatur eligendi ipsa, aperiam quam ea cupiditate eius blanditiis delectus quo dolorum consectetur.</div>
  </div>
</div>

style.css

*{
  box-sizing: border-box;
}

body{
  margin: 0;
}

h2{
  padding-left: 20px;
  text-transform: uppercase;
}

.container{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0.8;
  .modal{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 800px;
    height: 500px;
    background: white;
    border-radius: 10px;
    border: 3px solid darkgray;
    padding-top: 60px;
    .header{
      position: absolute;
      top: 0;
      background: darkgray;
      height: 60px;
      width: 100%;
    }
    
     .tab{
        display: inline;
        text-transform: capitalize;
        line-height: 30px;
        background: white;
        margin: 21px 0 0 0px;
        width: 100px;
        height: 30px;
        border-color: darkgray;
        border-style: solid;
        border-width: 1px 1px 0 0;
        text-align: center;
        float:left;
        z-index: 9;
        
        &:first-child{
          border-radius: 10px 0 0 0;
          border-width: 1px 1px 0 1px;
          margin-left: 40px;
        }
        &:last-child{
          border-radius: 0px 10px 0 0;
          border-width: 1px 1px 0 0; 
        }
        &.active{
          background: lightgray;
        }
        &:hover{
          box-shadow: 0px -5px 0 red;
          cursor: pointer;
        }
      }
    
    .content{
      width: 90%;
      height: 350px;
      text-align: center;
      background: lightgray;
      padding: 20px;
      margin: auto;
      margin-top: 50px;
      border-radius: 0px 10px 10px 10px; 
      border: 1px solid darkgray;
     
    }
    
  }
}

Tabmockup.markdown

Tab Live Mockup ('-' * 6)

A Pen by Mateus Carniatto on CodePen.

License.