JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<ul class="category-list">
  <li class="active"><a href="">View All</a></li>
  <li><a href="">Virtual tour</a></li>
  <li><a href="">Amenities</a></li>
  <li><a href="">Apartments</a></li>
</ul>

SCSS

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  position: relative;
  padding-bottom: 10px;
  padding-left: 15px;
  &::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    border: 1px solid #000;
    left: 12px;
    top: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  &.active {
    &::before {
      background-color: #000;
      opacity: 1;
      left: 12px;
      visibility: visible;
    }
    padding-left: 25px;
      &:hover {
        a {
          transform: none;
        }
        }
  }
  &:hover {
    a {
      transform: translateX(12px);
      opacity: 1;
      
    }
    &::before {
      opacity: 1;
      visibility: visible;
    }
  }
}
a {
  text-decoration: none;
  color: #000;
  transform: translateX(0);
  transition: all 0.3s ease;
  display: inline-block;
}