JSFiddle - React, Tailwind, and code Playground

by Abner Rodrigues

HTML

<section class="section-pizzaria">
  <p>
    Nossas pizzas são de receitas uruguaias que foram adaptadas por nós mesmos. Após assadas,
    as pizzas são servidas em uma pedra de granito mantendo a pizza aquecida para que ela não esfrie.
  </p>
  <h2>Tamanhos:</h2>
  <ul class="pizza-size">
    <li>Grande - 24 pedaços - 3 sabores <a href="#">Ver</a></li>
    <li>Média - 16 pedaços - 2 sabores <a href="#">Ver</a></li>
    <li>Pequena - 10 pedaços - 1 sabor <a href="#">Ver</a></li>
  </ul>
  <h2>Nossos sabores</h2>
  <div class="filter">
    <ul class="ul-filter">
      <li class="all">TODOS</li>
      <li class="meat">CARNE</li>
      <li class="chicken">FRANGO</li>
      <li class="special">ESPECIAL</li>
      <li class="cheese">QUEIJO</li>
      <li class="spicy">PICANTE</li>
      <li class="fish">FRUTOS DO MAR</li>
      <li class="sweet">DOCE</li>
    </ul>
  </div>
  <div class="container-pizza"></div>
</section>

<script defer type="text/javascript" src="./scripts.js"></script>
<script type="text/javascript" src="./products.js"></script>
<script type="text/javascript" src="./createListPizza.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

CSS

.container-pizza {
    display: grid;
    grid-template-columns: 350px 350px 350px 350px;
    gap: 20px;
}

.item-pizza {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

.item-pizza img {
    width: 350px;
}

.item-pizza h5, .item-pizza i {
    font-size: 25px;
    color: #222222;
}

.item-pizza a {
    cursor: pointer;
}

.item-pizza i {
    font-size: 35px;
}

.item-pizza i:hover  {
    color: #4387F7;
}

.ingredients {
    background-color: #ff5252;
    position: absolute;
    top: 70px;
    border-radius: 10px;
    transition: 1s;
}

.item-pizza p {
    width: 100%;
    color: #FDFDFD;
    margin: 0 auto;
    font-weight: 500;
}
.closed .ingredients {
    overflow: hidden;
    max-height: 0;
}

.active .ingredients {
    max-height: 350px;
}

.ul-filter {
    display: flex;
    gap: 80px;
    list-style-type: none;
    margin-top: 40px;
    margin-bottom: 40px;
    border-bottom: solid 2px #262626;
    padding: .5rem;
}

.ul-filter li {
    cursor: pointer;
    font-weight: 500;
    border: none;
}

.ul-filter li:hover {
    color: #4387F7;
}

JavaScript

const linkIcon = document.querySelectorAll(".link-icon");

linkIcon.forEach((link) => {
  link.addEventListener("mouseover", function () {
    const item = this.parentNode; // parentNode é o pai do nó la do HTML (classe item)
    const isActive = item.classList.contains("active");

    if (!isActive) {
      item.classList.remove("closed");
      item.classList.add("active");
    }
  });
});

linkIcon.forEach((link) => {
  link.addEventListener("mouseleave", function () {
    const item = this.parentNode; // parentNode é o pai do nó la do HTML (classe item)
    const isActive = item.classList.contains("active");

    if (isActive) {
      item.classList.remove("active");
      item.classList.add("closed");
    }
  });
});