NFT preview card component

Hello, JMartinez904 Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

• You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main>
      <section></section>
      <div></div>
</main>

• add the below code to the body. It will center everything

body {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

You could also make use of <section> and/or <article> semantic tags. This would help improve accessibility.

• active-state of img

<div class="item">
      <a class="hover-effect" data-overlay="rgba(52,58,64,.6)" target="_blank" rel="noreferrer"><span class="hover-effect-container">
          <span class="hover-effect-icon ">
            <span class="top-icon">
              <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                </path>
              </svg>
            </span>
          </span>
        </span>
        <div class="p-2">
          <div >
               <img src="./images/image-equilibrium.jpg" class="rounded-lg" alt="">
         </div>
        </div>
      </a>
    </div>

• hover effect

.item {
    overflow: hidden;
    position: relative;
}


.hover-effect {
    display: block; 
    overflow: hidden;
    position: relative;
}

.hover-effect:before {
    background-color: rgba(44,45,48,0);
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}


.hover-effect-container {
    left: 50%;
    position: absolute;
    top: -1.25rem;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition: .4s;
}

.hover-effect-icon {
    color: #fff;
    display: inline-block;
    font-size: .75rem;
    text-align: center;
}

• active-state of h3 & p span

h3, p span{
    cursor: pointer;
    color: var(--Cyan);
}

a small transition will be more attractive.

I hope it will work. Happy coding.