A
Anonymous

Categories Section with Square Display

<style> .custom collection slider { margin: 0 auto; } .custom collection slider .icon wrap { display: none; } .custom collection slider .card__heading { text align: center; color: #000; } .custom collection slider ul { justify content: center; } .custom collection slider .card__media, .custom collection slider .card__inner { border radius: 0 !important; /* Make the shape square */ } .custom collection slider .card:hover .media.media hover effect>img:first child:only child { transform: scale(1.1); transition: .3s ease in out; } .custom collection slider .card__content .card__heading { font size: 14px; } .custom collection slider .grid__item { width: calc(7.66% var( grid desktop horizontal spacing) * 5 / 6); } .custom collection slider .card__media { border: 2px solid #dadada; padding: 2px; overflow: hidden; /* Ensure content fits within the square */ } .custom collection slider .card:hover .card__media { border: 3px solid #000; transition: .3s ease in out; } @media only screen and (max width: 800px) { .custom collection slider ul { display: webkit inline box; } .custom collection slider .card__content .card__heading { font size: 13px; } .custom collection slider .grid__item { width: calc(40% var( grid mobile horizontal spacing) 3rem) !important; } } </style> using this same code make changes to make the categories section display square and not round corners

Prompt
Component Preview

About

Learn how to modify your Tailwind React component to display category cards with sharp, square corners instead of rounded edges for a clean, modern look.

Share

Last updated 1 month ago