Tags

by matox

HTML

<div class="tags-input form-group">
  <div class="form-control">
    <ul class="scroll-handle">
      <li>
        <div class="tag-content blue">
          <div class="tag">My first tag</div>
          <i class="close">X</i>
        </div>
      </li>
      <li>
        <div class="tag-content blue">
          <div class="tag">My first tag</div>
          <i class="close">X</i>
        </div>
      </li>
    </ul>
  </div>
</div>

SCSS

.tags-input {
      width: 300px;
      margin: 0;
      vertical-align: middle;
      overflow: hidden;
      text-align: left;
      white-space: nowrap;
      .form-control {
          padding: 6px 0px;
          list-style: none;
          ul.scroll-handle {
              padding: 0;
              li {
                  display: inline-block;
                  .tag-content {
                      display: inline-block;
                      .tag {
                          margin: 0 4px;
                          padding: 2px 4px;
                          color: #333;
                          border-radius: #ccc;
                          font-size: 12px;
                          .close {
                              font-size: 12px;
                              color: #fff;
                              opacity: 1;
                          }
                      }
                      &.blue {
                          background: blue;
                      }
                      &.red {
                          background: red;
                      }
                  }
              }
          }
          span {
              margin: 0 6px;
          }
      }