Fix overlapping card content on the website using tailwind based approach

This commit is contained in:
Abhinav Arya
2023-10-08 10:18:00 +00:00
parent eca90dfd9a
commit f9457b04f6
2 changed files with 2 additions and 3 deletions

View File

@@ -84,11 +84,11 @@ export default function BestPracticeNavigation() {
<div className="mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
{BestPractices.map((bestPractice) => (
<Link href={bestPractice.href} key={bestPractice.name}>
<div className="drop-shadow-card duration-120 hover:border-brand-dark break640:p-4 relative rounded-lg border border-slate-100 bg-slate-100 p-8 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
<div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
<div
className={clsx(
// base styles independent what type of button it is
"break640:text-3xs break640:right-3 absolute right-7 rounded-full px-3 py-1",
"text-3xs absolute right-6 rounded-full px-3 py-1",
// different styles depending on type
bestPractice.category === "Boost Retention" &&
"bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",

View File

@@ -69,7 +69,6 @@ export default {
},
screens: {
xs: "430px",
break640: { min: "640px", max: "950px" },
},
opacity: {
1: "0.01",